Introduction to event handling in DOM_DOM

This interface provides 'addEventListener' and 'removeEventListener' methods for binding or unbinding an EventListeners interface to an EventTarget.

DOM 2 Events defines the Event interface to provide event context information. It provides several standard properties and methods. The object that implements the Event interface is generally passed into the event processing 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, and uses ' attachEvent' and 'detachEvent' methods as alternatives, Opera supports both methods. Chrome Safari Firefox only supports standard methods.

In order to solve browser compatibility issues, you can customize functions to solve it. For example:

Copy code The code is as follows:

var EventUtil = {
addHandler: function (element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent ("on" type, handler);
} else {
element["on" type] = handler;
}
},
removeHandler: function (element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.detachEvent) {
element.detachEvent("on" type, handler );
} else {
element["on" type] = null;
}
}
};

About 'addEventListener' There are several points to note with 'attachEvent':

IE does not support triggering event listeners in the capture phase, and the 'attachEvent' method does not provide parameters to indicate whether to respond to events triggered in the capture phase;
'addEventListener' and 'attachEvent' can register multiple event listeners;
Register the same event listener multiple times for the same event in Firefox Chrome Safari Opera, and the duplicate registrations will be discarded; and the event listeners that are repeatedly registered in IE The handler will be executed repeatedly multiple times;
When multiple event listeners are registered for the same element, the execution order of event listeners in IE6 IE7 is random, IE8 is in reverse order, and Firefox Chrome Safari Opera is sequential;
When there is an illegal event listener (non-function) in the event listener registered by the element, an exception will be thrown in IE Firefox, while in Chrome Safari Opera, the illegal event listener will be ignored and other execution will continue. event listener.
Event object
In IE, the event object is saved and maintained as a global variable. All browser events, whether triggered by the user or other events, will update the window.event object. So in the code, you can easily get the event object by simply calling window.event, and then use event.srcElement to get the element that triggered 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. The event object is automatically passed to the corresponding event processing function. In the code, the first parameter of the function is the event object.

In order to solve compatibility issues, it is usually handled as follows in the code:

Copy code The code is as follows:

function handler(e){
e = e || window.event;
}

It should be noted that when using Button 1 for event registration, the event object cannot be obtained in the event processing method in the standard way.

The reason is that onclick="foo()" is executed directly. The foo() function does not have any parameters passed to the foo function.

There are two ways to solve this problem.

First, change the registration method to button. Note that the event here is not a formal parameter, but It is an actual parameter and must be named event. This way the foo function can get the event parameters.

Second, do not modify the registered code and handle it in the event processing method. The key is that the event object actually exists 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. It doesn't matter. We can get the current call of the foo function through foo.caller. Function, the first parameter of this function is the event object, so we can get the event object like this. foo.caller.arguments[0].

Note:

Only when you use the attachEvent method to register an event listener, IE supports using the first parameter passed in by the event listener as the event object;
Chrome Safari Opera supports both methods of obtaining event objects;
Firefox only supports the standard method of obtaining event objects.
Attributes of the event object
IE has limited support for the standard attributes and methods of the event object. For most attributes and methods, IE provides a set of non-standard alternatives; while Firefox, Chrome, Safari Opera, in addition to full support In addition to the standard properties and methods of the event object, it also supports non-standard alternatives provided by IE to varying degrees.

Use characteristics to judge and use non-standard methods and properties corresponding to the standard

target　　　　srcElement

　preventDefault()　　returnValue

　stopPropagation()　　cancelBubble

relatedTarget　　　fromElement toElement

For example:

Copy code The code is as follows:

getEvent: function (event) {
return event ? event : window.event;
},
getTarget: function (event) {
return event.target || event.srcElement;
},
preventDefault: function (event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
stopPropagation: function (event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true ;
}
}

Reference:

SD9011: Event models differ across browsers