Using js to implement event processing model

This article mainly introduces the use of js to implement event processing models. It has certain reference value for beginners. Interested friends can refer to it.

There are four event models in various browsers: original event model, standard event model, IE event model, and a Netscape4 event model, which will be introduced in detail below.

1. There are currently four event processing models: original event model, standard event model, IE event model, and a Netscape4 event model, but it can basically be ignored

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

1. Basic event processing :

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

(1) Event processing as an HTML tag, such as

…… p>              //Here, onmouseover is just a representative, and also includes many other events

In this method, JS code strings are assigned to onmouseover and other event processing functions, and the system will automatically package these code strings in an anonymous function. There can be the this keyword, which points to the tag element, and the event keyword, which represents the event object when the event occurs (used in standard browsers). Such as

……

In fact, we can regard onmouseover, etc. as a function. Before assigning a value to it, it It's just an empty function. After assigning js code to it, it is equivalent to adding code to the empty function. Because onmouseover, etc. are actually a function, we can call it explicitly, such as element.onmouseover(), but this will not cause the mouseover event to actually occur.

You can return false to the event function (i.e. onmoouseover, etc.) to cause the default action to occur.

The function runs in the scope in which it is defined, so if you assign js code to the event processing function, it is equivalent to defining a function in this HTML tag environment. This environment is quite special, and its high The first-level scope is not the window global object environment. There is at least one scope environment between the two. As for the function defined in <script>, its higher-level scope environment is window (of course, nested functions are another matter). Therefore, in HTML tags, it is best to put the code in a function defined in <script>, and then assign this function call to the event function, that is, <p onmouseover="function();"> ……</script>

(2), event processing as javascript attribute For example, element.onmouseover=function(){……}

Note that in this way, you can no longer give The event handling function is assigned a js code string, but directly assigns the function (not a function call) to it, or assigns an anonymous function, such as element.onmouseover=function(){……} or element.onmouseover=f; f As a function, parentheses cannot be added here

Basic event processing will also propagate upward in the form of bubbling

2. Advanced event processing:

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

[Conceptual understanding] Event propagation can be divided into two types: one is capture propagation, and the other is bubbling 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

(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. It has three parameters. The first parameter is the event name. Note that there is no The prefix is ​​on, and the second one is the processing function (of course it can also be an anonymous function). When an event occurs, the system will automatically pass in 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 in the event capture and propagation stage. If it is false, it is only used in the event bubbling propagation stage. Generally, we set it to false

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

f function can be defined like this: function f(e){...} //The parameters in it represent the Event when the event occurs Object

One of the major advantages of advanced event processing is that multiple event processing 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.

removeEventListener() This method is used to remove event registration. Its three parameters are the same as addEventListener()

(2) IE event model

IE event model only supports event bubbling propagation

【Event registration function】

attactthEvent() This method has only 2 parameters, one is the event name, note the prefix on, and the second is the event processing function. For example, element.attachEvent("onclick",f)

The Event object of the IE event model is not passed as a parameter to the event processing function when the event occurs. The Event object of IE is a global object of the window. Access is only available when an event occurs.

So the f function can be defined like this: function f(){var e=window.event;......} //where e obtains the Event object

detachEvent() This method is used Cancel event registration, the parameters are the same as attachthEvent()

An important difference between addEventListener() and attachthEvent() is that the this keyword in the event processing function registered by attachthEvent() always points to the window object, while addEventListener () This in the registered event processing function points to the element where the event occurred

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

mouse event. 0 means that the mouse button is not pressed, 1 means that the left button is pressed, 2 means that the right button is pressed, 4 means that the middle button is pressed, 3 means that the left and right buttons are pressed at the same time, 5 means that the left and middle buttons are pressed, and 6 means that the right and middle buttons are pressed. Middle button, 7 means pressing the left button, middle button, and right button 0 means left button, 1 means middle button, and 2 means right button When the event occurs, the X coordinate of the mouse in the browser window (excluding toolbars, scroll bars, etc.)When the event occurs, the X coordinate of the mouse in the browser window (excluding toolbars, scroll bars, etc.)##The name of the event (such as click)srcElement## offsetXlayerX When the element that triggers the event is set to dynamic positioning, the X coordinate of the mouse relative to the element that triggered the event is returned, with the upper left corner of the element's boundary as the origin. xThe above is what I compiled for everyone. I hope it will be helpful to everyone in the future. help.

IE event object	IE event object	Standard Event Object	Standard Event Object
altKey	true means the ALT key was pressed, false means not	altKey	true means the ALT key was pressed. false means there is no
ctrlKey	true means the CTRL key is pressed, false means there is no	ctrlKey	true means the CTRL key is pressed, false means there is no
##shiftKey	true means the SHIFT key is pressed, false means no	shiftKey	true means The SHIFT key is pressed, false means there is no
button		button
clientX		clientX
clientY	Same as above	clientY	Same as above
screenX	X coordinate of the mouse on the entire screen when the event occurs	screenX	X coordinate of the mouse on the entire screen when the event occurs
screenY	Same as above	screenY	Same as above
type	The name of the event (such as click)	type
	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, and 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	The value is true will prevent the event from continuing to bubble upward	stopPropagation	You can call this method to prevent the event from continuing to bubble upward
		cancelBubble	true means the event bubbling has been cancelled, false means not
returnValue	A value of false will prevent the default behavior of the event	preventDefault()	Call this method to prevent the default behavior of the event
Get the X coordinate of the mouse relative to the element that caused the event when the event occurs, that is, the upper left corner of the element that caused the event itself (without calculating padding and margin) is the origin		When the element that triggers the event does not have dynamic positioning, the X coordinate of the mouse relative to the closest parent element that has dynamic positioning set to the element that triggered the event is returned, based on the border of the parent element. The upper left corner is the origin.
Get the X coordinate of the mouse relative to the most recent dynamically positioned parent element of the element that triggered the event, based on the parent element The upper corner of the border i is the origin

Related articles:

How to use JSON

##js

Through html() and text( ) method to get and set the display value of the p tag## Summary of the use of the three JS loading methods

The above is the detailed content of Using js to implement event processing model. For more information, please follow other related articles on the PHP Chinese website!