js Learning Notes: Event Handling Model

There are four types of event models in various browsers: the original event model, the standard event model, the IE event model, and another Netscape4event model. The following will introduce it specifically.

1、There are currently four types of event handling models: the original event model, the standard event model, the IE event model, and another Netscape4model, but it can be ignored

2、The event handling model can be divided into two types: basic event handling and advanced event handling. The original event model belongs to basic event handling, while the standard event model and IE event model belong to advanced event handling

1. Basic Event Handling:

(1）、as event handlers of HTML tag properties, such as <div onmouseover='var a=',1; alert();”>…</div>　　　　　　　　　　 //Here, onmouseover is just an example, and it also includes many other events

In this way, the JS code string assigned to the onmouseover and other event handler functions is automatically wrapped in an anonymous function by the system. It can contain the this keyword, which points to the tag element, and the event keyword, which represents the event object at the time of the event (used in standard browsers). For example, <div onmouseover='f(this,event);'>...</div>/div>

　In fact, we can view onmouseover and others as functions. Before they are assigned a value, they are empty functions. After assigning JavaScript code to them, it is equivalent to adding code to an empty function. Since onmouseover and others are actually functions, we can explicitly call them, such as element.onmouseover(), but this will not actually trigger the mouseover event.

You can return false from an event function (such as onmouseover) to prevent the default action from occurring.

Functions operate within the scope in which they are defined, so if you assign JavaScript code to an event handler function, it is equivalent to defining a function within the HTML tag environment. This environment is quite special as its higher-level scope is not the window global object environment, and there is at least one scope environment between them. The function defined within <script> has its higher-level scope environment as the window (of course, nested functions are an exception). Therefore, it is best to place the code within a function defined in <script> and then assign this function to the event handler, i.e., <div onmouseover='function();'>...</div>/div>

(2) As a JavaScript property, event handling is as follows: for example, element.onmouseover = function() {…}

Note that in this way, you can no longer assign JavaScript code strings to the event handling function, but directly assign the function (not the function call) to it, or assign an anonymous function, such as element.onmouseover = function() {…} or element.onmouseover = f; where f is a function, and you cannot add parentheses here

Basic event handling will also propagate upwards in the form of bubbling

　Second, advanced event handling:

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

【Concept Understanding】 The propagation of events can be divided into two types: capture propagation and bubble propagation.

Capture propagation: that is, the event is transmitted from the outside to the inside, and the event occurs at each level

Bubble propagation; that is, the event is transmitted from the inside to the outside, and the event occurs at each level, not all events will bubble

(1Standard event model

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

[Event registration function]

For example: element.addEventListener(　　　 //Here, f is a function

The function f can be defined as follows: function f(e){…}　 //The parameters represent the Event object when the event occurs

One of the major advantages of advanced event handling is that multiple event handling functions can be registered for the same element. The order in which these event functions are executed cannot be determined, but generally, they are executed in the order of registration. If duplicate event functions are registered, only the first one will take effect.

The removeEventListener() method is used to unregister event subscriptions, 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]

attachEvent() This method only2One parameter is the event name, note that there is a prefix on, and the second one is the event handler. For example, element.attachEvent(“onclick”,f)

　The Event object in the IE event model is not passed as a parameter to the event handler when the event occurs. The IE Event object is a global object of the window, and it can only be accessed when an event occurs.

Therefore, the f function can be defined as follows: function f() { var e = window.event; ……}　　 //where e acquires the Event object

detachEvent() This method is used to cancel event registration, and the parameters are the same as attachEvent()

　One important difference between addEventListener() and attachEvent() is that the this keyword in the event handler registered by attachEvent() always points to the window object, while the this in the event handler registered by addEventListener() points to the element that caused the event

　(3Comparison between IE and standard event model's Event object

IE event object	IE event object	Standard event object	Standard event object
altKey	true indicates that the ALT key is pressed, false indicates that it is not	altKey	true indicates that the ALT key is pressed. false indicates that it is not
ctrlKey	true indicates that the CTRL key is pressed, false indicates that it is not	ctrlKey	true indicates that the CTRL key is pressed, false indicates that it is not
shiftKey	true indicates that the SHIFT key is pressed, false indicates that it is not	shiftKey	true indicates that the SHIFT key is pressed, false indicates that it is not
button	Mouse events. 0 indicates that no mouse button is pressed1For pressing the left mouse button2For pressing the right mouse button4For the middle mouse button3For pressing both the left and right mouse buttons5For pressing the left and middle mouse buttons6For pressing the right and middle mouse buttons7For pressing the left, middle, or right mouse button	button	0 for the left mouse button,1For the middle mouse button,2For the right mouse button
clientX	The X coordinate of the mouse in the browser window (excluding toolbars, scrollbars, etc.) at the time of the event	clientX	The X coordinate of the mouse in the browser window (excluding toolbars, scrollbars, etc.) at the time of the event
clientY	As above	clientY	As above
screenX	The X coordinate of the mouse on the entire screen at the time of the event	screenX	The X coordinate of the mouse on the entire screen at the time of the event
screenY	As above	screenY	As above
type	The name of the event (such as click)	type	The name of the event (such as click)
srcElement	The element that caused the event	target	The element that caused the event
keyCode	For the keypress event, it represents the Unicode character of the button, while for the keydown and keyup events, it represents the numeric code of the button	charCode	Represents the Unicode character of the key
		keyCode	Represents the numeric code of the key
cancelBubble	When the value is true, it will prevent the event from bubbling up	stopPropagation	You can call this method to prevent the event from bubbling up
		cancelBubble	true means that the event bubble has been canceled, and false means that it has not
returnValue	When the value is false, it will prevent the default behavior of the event	preventDefault()	Calling this method can prevent the default behavior of the event
offsetX	Get the X coordinate of the mouse relative to the element that triggered the event at the time of the event occurrence, that is, taking the upper left corner of the element itself (without calculating padding and margin) as the origin.	layerX	If the element that triggered the event does not have dynamic positioning, return the X coordinate of the nearest parent element with dynamic positioning relative to the element that triggered the event, taking the upper left corner of the border of the parent element as the origin. 　　　　　　　 If the element that triggered the event has dynamic positioning, then return the X coordinate of the mouse relative to the element that triggered the event, taking the upper left corner of the element boundary as the origin.
x	Get the X coordinate of the nearest parent element with dynamic positioning relative to the element that triggered the event, taking the upper left corner of the border of the parent element as the origin.

That's all for this article. Hope it helps everyone's learning and also hope everyone will support the Yelling Tutorial more.

Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume relevant legal liabilities. If you find any copyright-infringing content, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email for reporting. Provide relevant evidence, and once verified, this site will immediately delete the infringing content.)