JS Learning Notes Event Processing Model _ basic knowledge

There are four kinds of event models in various browsers: the original event model, the standard event model, the IE event model, and a NETSCAPE4 event model, which is described in detail below.

1, there are currently four kinds of event processing models are: The original event model, standard event model, IE event model, there is a NETSCAPE4 event model, but the basic can be ignored

2, the event processing model can be divided into basic event processing and high-level event processing two kinds, the original event model belongs to the basic event processing, standard event model and IE event model belong to advanced event processing

First, basic event processing:

Basic event handling is primarily the event handling that the original event model implements. It is mainly divided into the following two kinds:

(1), as an HTML tag nature of event processing, such as <div onmouseover= "Var a=1; alert (); " >......</div>//Here, onmouseover is just a representative, and contains many other events

In this way, the event-handling functions assigned to onmouseover are JS code strings, which are automatically packaged in an anonymous function. It can have the this keyword, which points to this tag element, or an event keyword, which represents the event object (used in standard browsers) when the event occurred. such as <div onmouseover= "F (this,event);" >......</div>

In fact, we can think of onmouseover as a function, it is an empty function before it is assigned a value. Give it a JS code, it is equivalent to the empty function added code. Because onmouseover is actually a function, so we can display the call to it, such as Element.onmouseover (), but this does not cause the MouseOver event to really happen.

You can return false to the event function (that is, onmoouseover, and so on) to behave as if the default action occurred.

A function is run in the scope in which it is defined, so if you assign a JS code to the event handler function, you define a function in this HTML tag environment, which is special, and its higher level scope is not the window global object environment. At least one scope environment is separated between the two. and the function defined in <script>, its high level scope environment is window (of course, nested functions are another matter). So, in HTML tags, it's best to put the code in a function defined in <script>, and then assign the function call to the event function, the <div onmouseover= "function ();" >......</div>

(2), event handling as a JavaScript property such as Element.onmouseover=function () {...}

Note In this way, you can not assign the event handler function JS code string, but directly to the function (not function call) assigned to it, or to assign an anonymous function, such as element.onmouseover=function () {...} Or element.onmouseover=f f is a function, where parentheses cannot be added

Basic event handling is also propagated upward in bubbling form.

Ii. Advanced Event Handling:

Advanced event handling, as long as it refers to the standard event model and the event handling implemented by the IE event model.

There are two types of "conceptual understanding" events: one is capture propagation and the other is bubbling propagation.

Capture propagation: The event is transmitted from the outside, and the event occurs at each level

Bubbling propagation; That event occurs from the inside out, and not all events bubble up at every level.

(1) Standard event model

The standard event model can occur both bubbling propagation and capture propagation.

"Event Registration Function"

AddEventListener () This method registers an event handler for a specific element, with three parameters, the first argument being the event name, note that there is no prefix on, and the second is a handler (or, of course, an anonymous function), when the event occurs, The system automatically passes in an event object to the first parameter of the function. The last argument is a Boolean value, and if true, it is used only for the event capture propagation phase and, if false, only for the event bubbling propagation phase, which we normally set to False

For example: Element.addeventlistener ("click", F,false)//where f is a function

The F function can be defined as this: function f (e) {...} Where the argument represents the event object when it occurs

One of the great advantages of advanced event handling is that you can register multiple event handlers for the same element, and the order in which these event functions are executed is not certain, but is generally performed in the order of registration, and if duplicate event functions are registered, only the first one will take effect.

RemoveEventListener () This method is used to dismiss event registrations, and its three parameters are the same as AddEventListener ()

(2) IE event model

The IE event model only supports event bubbling propagation

"Event Registration Function"

Attacthevent () The method has only 2 parameters, one is the event name, the note has the prefix on, and the second is the event handler function. For example element.attachevent ("onclick", f)

The IE event object is not an event handler as a parameter when an event occurs, IE is a global object of the window and can only be accessed if the event occurs.

So the F function can be defined as this: function f () {var e=window.event ...} where e gets the event object

DetachEvent () This method is used to cancel event registration with the same parameters as Attacthevent ()

An important difference between addeventlistener () and Attacthevent () is that the This keyword in the event handler function registered in Attacthevent () is always pointing to the Window object, and AddEventListener () This in the registered event-handler function points to the element in which the event occurred

(3) Comparison of event objects between IE and the standard events model

IE Event Object	IE Event Object	Standard Event Objects	Standard Event Objects
Altkey	True indicates that the ALT key was pressed, false indicates no	Altkey	True indicates that the ALT key was pressed. False indicates no
Ctrlkey	True indicates that the CTRL key is pressed, false indicates no	Ctrlkey	True indicates that the CTRL key is pressed, false indicates no
Shiftkey	True indicates that the SHIFT key is pressed and false indicates no	Shiftkey	True indicates that the SHIFT key is pressed and false indicates no
button	Mouse events. 0 means that the mouse button is not pressed, 1 for press the left button, 2 for the right key, 4 for the middle key, 3 for the same time press left and right key, 5 to press the left button and the middle key, 6 to press the right-click and middle key, 7 for press left, middle key, right key	button	0 is the left key, 1 is the middle key, 2 is the right key
ClientX	When an event occurs, the mouse is in the X coordinate of the browser window (not including toolbars, scrollbars, etc.)	ClientX	When an event occurs, the mouse is in the X coordinate of the browser window (not including toolbars, scrollbars, etc.)
ClientY	Ditto	ClientY	Ditto
ScreenX	The x coordinate of the mouse on the entire screen when the event occurs	ScreenX	The x coordinate of the mouse on the entire screen when the event occurs
ScreenY	Ditto	ScreenY	Ditto
Type	The name of the event (for example, click)	Type	The name of the event (for example, click)
Srcelement	element that causes the event	Target	element that causes the event
KeyCode	For the KeyPress event, the Unicode character of the button, which represents the numeric code of the button for the KeyDown and KeyUp events	CharCode	Unicode character representing the key
		KeyCode	Numeric code that represents a key
Cancelbubble	True will prevent the event from continuing 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 and false indicates no
ReturnValue	A value of FALSE will block the default behavior of the event	Preventdefault ()	Calling this method can prevent the default behavior of an event
OffsetX	Gets the x-coordinate of the mouse relative to the element that caused the event when the event occurred, that is, the upper-left corner of the element that causes the event (without computing padding and margin) as the origin	Layerx	When the element that raises the event is not dynamically positioned, the nearest one of the element that raises the event is returned with the x-coordinate of the parent element that is dynamically positioned, with the upper-left corner of the bounding rectangle of its parent element as the origin. When the element that raises the event is positioned dynamically, it returns the x-coordinate of the mouse relative to the element that raised the event, with the upper-left corner of the element's bounds as the origin.
X	Gets the x-coordinate of the parent element that is dynamically positioned relative to the last setting of the element that raised the event, with the top corner of the border I of the parent element as the origin

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.