According to W3CDOM2Events, The EventTarget interface is implemented by all nodes that support the DOM event model. This interface provides the 'addeventlistener 'and 'removeeventlistener' methods, used to bind or unbind an EventListeners interface to an EventTarget.
DOM 2 Events defines the Event interface to provide the context information of the Event. It provides several standard attributes and methods. Objects that implement the Event interface are generally passed into the Event handler as the first parameter to provide information related to the current Event.
Event registration
According to the description in DOM 2 Events, the node uses the 'addeventlistener 'and 'removeeventlistener' methods to bind and unbind event listeners. However, IE6 IE7 IE8 does not support these two methods, opera supports both the 'tachevent' and 'detachevent' methods. Chrome Safari Firefox only supports standard methods.
To solve browser compatibility problems, you can use custom functions. For example:
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;
}
}
};
Pay attention to the following points for 'addeventlistener 'and 'attachevent:
IE does not support triggering event listeners during the capture phase. The 'tactachevent' method does not provide parameters to indicate whether to respond to events triggered during the capture phase;
Both 'addeventlistener 'and 'tachevent' can register multiple event listeners;
Register the same event listener for the same event multiple times in Firefox Chrome Safari Opera, and the event listener for repeated registration will be discarded; the event listener for repeated registration in IE will be repeatedly executed multiple times;
When multiple event listeners are registered for the same element, the execution sequence of IE6 IE7 Event Listeners is random, IE8 is inverted, and Firefox Chrome Safari Opera is sequential;
When an event listener registered with an element contains an invalid event listener (non-function), an exception is thrown in IE Firefox, while an invalid event listener is ignored in Chrome Safari Opera, continue to execute other event listeners.
Event object
In ie, event objects are saved and maintained as global variables. All browser events, whether triggered by the user or other events, will update the window. event object. Therefore, in the code, you only need to call window. event to easily obtain the event object, and then event. srcElement to obtain the element that triggers 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.
To solve compatibility problems, we usually handle the following in the Code:
The Code is as follows:
Function handler (e ){
E = e | window. event;
}
Note that Button 1Event registration, but the event object cannot be obtained in the event processing method in the standard mode.
The reason is that onclick = "foo ()" is to directly execute the foo () function without any parameters being passed to the foo function.
There are two ways to solve this problem.
First, modify the registration method ButtonNote: The event here is not a form parameter, but a real parameter and must be named event. In this way, the foo function can get the event parameters.
Second, do not modify the registered code and process the event in the event handling method. The key lies in the fact that there is 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 does not matter. It passes foo. caller can obtain the function currently calling the foo function. The first parameter of this function is the event object. Therefore, we can get this event object. Foo. caller. arguments [0].
Note:
Only when the attachEvent method is used to register the event listener can IE use the first parameter passed in by the event listener as the event object;
Chrome Safari Opera supports both methods to get event objects;
Firefox only supports standard methods for obtaining event objects.
Attribute of event object
IE has limited support for standard attributes and methods of event objects. For most attributes and methods, IE provides a set of alternative non-standard alternatives; in addition to fully supporting the standard attributes and methods of event objects, Firefox Chrome Safari Opera also supports non-standard alternatives provided by IE to varying degrees.
Use features to determine the use of standard-specific non-standard methods and attributes
Target srcElement
PreventDefault () returnValue
StopPropagation () cancelBubble
RelatedTarget fromElement toElement
For example:
The Code is as follows:
GetEvent: function (event ){
Return event? Event: window. event;
},
GetTarget: function (event ){
Return event.tar get | 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;
}
}
References:
SD9011: The event model varies across browsers.
