Js learning notes (14) Event Processing Model

1. There are currently four event processing models:Original event model, standard event model, and IE event modelAnd a Netscape4 event model, which can be ignored.

2. The event processing model can be further dividedBasic Event ProcessingAndAdvanced event processingThe original event model belongs to basic event processing, and the standard event model and the IE event model belong to Advanced event processing.

 

I. Basic event handling:

Basic event processing mainly refers to the event processing implemented by the original event model. It can be divided into the following two types:

(1) handle HTML Tag eventsFor example, <div onmouseover = "var a = 1; alert ();"> ...... </Div> // here, onmouseover is just a representative and contains many other events.

In this way, JS Code strings are assigned to event handler functions such as onmouseover. The system will automatically package these code strings in an anonymous function. You can haveThisKeyword. It points to this label element, which can also beEventKeyword, which indicates the event object when an event occurs (used in a standard browser ). For example, <div onmouseover = "f (this, event);"> ...... </Div>

In fact, we can regard onmouseover as a function. Before assigning a value to it, it is an empty function. After the js Code is assigned to it, it is equivalent to adding code to the empty function. Because onmouseover is actually a function, we can call it explicitly, for example, element. onmouseover (), but this will not cause the true occurrence of the mouseover event.

You can return false to the event function (such as onmoouseover) to act as the default action.

A function runs in the scope of its definition. Therefore, if a js Code is assigned to the event processing function, a function is defined in the HTML Tag environment. This environment is special, its high-level scope is not the window Global Object environment, and there is at least one scope environment between the two. The upper-level scope environment of the function defined in <script> is window (of course, nested functions must be discussed separately ). Therefore, in the HTML tag, it is best to place the code in a function defined in <script>, and then assign the function call to the event function, that is, <div onmouseover = "function ();"> ...... </Div>

(2) Processing events as javascript attributesFor example, element. onmouseover = function (){......}

Note that in this way, you cannot assign a js Code string to the event handler function, but directly assign the function (not a function call) to it or assign an anonymous function, such as element. onmouseover = function (){......} Or element. onmouseover = f; f is a function. Brackets cannot be added here.

Basic event processing will also spread upwards in the form of Bubbles

 

Ii. Advanced event handling:

Advanced event processing only refers to the event processing implemented by the standard event model and the IE event model.

[Concept understanding] event propagation can be divided into two types: capture propagation and bubble propagation.

Capture and propagation: events are transmitted from external to internal. This event occurs at each level.

Bubble propagation. This means that an event is uploaded from the inside to the outside, and this event occurs at each level. Not all events are bubbling.

(1) standard event model

The standard event model can both produce bubble propagation and capture propagation.

[Event registration function]

AddEventListener ()This method registers an event handler for a specific element. There are three parameters. The first parameter is the event name. Note that there is no prefix on, the second is a processing function (of course, an anonymous function). When an Event occurs, the system automatically sends an Event object to the first parameter of the function. The last parameter is a Boolean value. If it is true, it is only used for the event capture propagation phase. If it is false, it is only used for the event bubble propagation phase. Generally, we set it to false.

For example, element. addEventListener ("click", f, false) // where f is a function

The f function can be defined as follows: function f (e ){......} // The parameter indicates the Event object when an Event occurs.

One major advantage of advanced event processing is that you can register multiple event processing functions for the same element. The execution sequence of these event functions cannot be determined, but generally they are executed in the order of registration, if you have registered a repeated event function, only the first one will take effect.

RemoveEventListener ()This method is used to cancel event registration. Its three parameters andAddEventListener ()Same

 

(2) IE event model

The IE event model only supports event bubbling propagation.

[Event registration function]

AttacthEvent ()This method has only two parameters. One is the event name, with the on prefix, and the other is the event processing function. For example, element. attachEvent ("onclick", f)

The Event object of the IE Event model is not passed into the Event processing function as a parameter when an Event occurs. The Event object of IE is a global object of window and can be accessed only when an Event occurs.

So the f function can be defined as follows: function f () {var e = window. event ;......} // E obtains the Event object.

DetachEvent ()This method is used to cancel event registration.AttacthEvent ()Same

AddEventListener ()AndAttacthEvent ()An important difference is thatAttacthEvent ()In the registered event processing functionThisThe keyword always points to the window object, andAddEventListener ()In the registered event processing functionThisIt points to the element in which an event occurs.

 

(3) Comparison of Event objects between IE and standard Event models

IE event object	IE event object	Standard event object	Standard event object
AltKey	True indicates that the ALT key is pressed, and false indicates that no	AltKey	True indicates that the ALT key is pressed. False indicates no
CtrlKey	True indicates that the CTRL key is pressed, and false indicates that no	CtrlKey	True indicates that the CTRL key is pressed, and false indicates that no
ShiftKey	True indicates that the shift key is pressed, and false indicates that no	ShiftKey	True indicates that the shift key is pressed, and false indicates that no
Button	Mouse events. 0 indicates that the mouse key is not pressed. 1 indicates the left button, 2 indicates the right button, 4 indicates the middle key, 3 indicates the left and right keys simultaneously, and 5 indicates the left and right buttons, 6. Right-click and Middle-click. 7. left-click, middle-click, and right-click.	Button	0 is left-click, 1 is middle, 2 is right-click
ClientX	When an event occurs, place the cursor in the X coordinate of the browser window (excluding the toolbar, scroll bar, and so on)	ClientX	When an event occurs, place the cursor in the X coordinate of the browser window (excluding the toolbar, scroll bar, and so on)
ClientY	Same as above	ClientY	Same as above
ScreenX	The X coordinates of the mouse over the screen when an event occurs.	ScreenX	The X coordinates of the mouse over the screen when an event occurs.
ScreenY	Same as above	ScreenY	Same as above
Type	Event name (such as click)	Type	Event name (such as click)
SrcElement	Element that causes the event	Target	Element that causes the event
KeyCode	For keypress events, it indicates the unicode Character of the button. For keydown and keyup events, it indicates the digital code of the button.	CharCode	Unicode Character of the key
		KeyCode	Indicates the numeric code of the key.
CancelBubble	When the value is true, the blocking Event continues to bubble up.	StopPropagation	You can call this method to prevent the event from continuing to bubble up.
		CancelBubble	True indicates that event bubbling has been canceled; false indicates no
ReturnValue	When the value is false, the default behavior of the event will be blocked.	PreventDefault ()	You can call this method to prevent the default behavior of an event.
OffsetX	Obtains the X coordinate of the mouse relative to the element that causes the event when an event occurs, that is, the origin is the upper-left corner of the element that causes the event (no need to calculate padding and margin ).	LayerX	When the element that triggers the event is not dynamically located, the system returns the X coordinates of the parent element with the most recent cursor relative to the element that triggers the event, the origin is the upper left corner of the border of its parent element. When the element that triggers the event is set to dynamic positioning, the X coordinate of the mouse relative to the element that triggers the event is returned, with the upper left corner of the element boundary as the origin.
X	Obtains the X coordinate of the parent element that is dynamically located relative to the last element that triggers the event. The cursor of the border I of the parent element is used as the origin.