Introduction to event handling in DOM

This interface provides the 'addEventListener' and 'removeEventListener' methods to bind or unbind an EventListeners interface to an EventTarget.

The Event interface is defined in DOM 2 Events to provide context information for events, which provides several standard properties and methods. Objects that implement the Event interface are generally passed into the event handler function as the first parameter to provide some information related to the current event.

Event registration
According to the description in DOM 2 Events, nodes use the 'addEventListener' and 'removeEventListener' methods to bind and unbind event listeners, but IE6 IE7 IE8 does not support these two methods, but use the 'attachEvent' and 'detachEvent' methods as alternatives, both Opera methods support it. Chrome Safari Firefox only supports standard methods.

To solve the browser compatibility problem, you can customize the functions to solve it. For example:


There are several points to note about 'addEventListener' and 'attachEvent':

IE does not support triggering event listeners during the capture phase, and the 'attachEvent' method does not provide parameters to indicate whether to respond to events triggered during the capture phase;
Both 'addEventListener' and 'attachEvent' can register multiple event listeners;
Register the same event listener for the same event multiple times in Firefox Chrome Safari Opera, and those who register repeatedly will be discarded; while the event listener that registers repeatedly in IE will be executed multiple times;
When multiple event listeners are registered for the same element, the execution order of IE6 IE7's event listeners is random, IE8 is reverse order, and Firefox Chrome Safari Opera is sequential;
When there is an illegal event listener in the event listener registered by the element (non-function), an exception will be thrown in IE Firefox, while in Chrome Safari Opera, the illegal event listener will be ignored and other event listeners will be continued.
Event Object
In ie, event objects are saved and maintained as a global variable. All browser events, whether triggered by users or other events, will update the object. Therefore, in the code, as long as you easily call , you can easily get the event object, and then you can get the elements that trigger the event for further processing.

For standard DOM processing, the event object is not a global object. Generally, it occurs on site and is used on site, and automatically passes the event object to the corresponding event processing function. In the code, the first parameter of the function is the event object.

To solve compatibility issues, it is usually handled as follows in the code:

It should be noted that the event registration is used using <button onclick="foo()">button 1</button>, but the event object cannot be obtained in the event processing method under standard methods.

The reason is that onclick="foo()" is executed directly. The foo() function has no parameters passed to the foo function.

There are two ways to solve this problem.

First, modify the registration method to <button onclick="foo(event)">button</button>. Note that the event here is not a formal parameter, but a real parameter, and must be called event. In this way, the foo function can get event parameters.

Second, do not modify the registered code and process it on the event processing method. The key is that there is actually an event object at this time, but it is not passed to the foo function. We can find the function that calls the foo function. Of course, this is a system function, and it doesn't matter. By obtaining the function that currently calls the foo function, the first parameter of this function is the event object, so we can obtain this event object in this way. [0].

Notice:

IE supports the use of the first parameter passed in by the event listener as an event object only when registering an event listener using the attachEvent method;
Chrome Safari Opera supports both ways to obtain event objects;
Firefox only supports standard way to get event objects.
Properties of event objects
IE has limited support for standard attributes and methods for event objects. For most attributes and methods, IE provides a set of alternatives to non-standard alternatives; while Firefox Chrome Safari Opera also supports non-standard alternatives provided by IE to varying degrees in addition to fully supporting standard attributes and methods for event objects.

Usage characteristics to judge the use of non-standard methods and attributes corresponding to the standard

targetsrcElement

preventDefault()　returnValue

stopPropagation()cancelBubble

relatedTargetfromElement toElement

For example:


References:

SD9011: Event model varies across browsers