Event Flow:
Event Bubbling: The event is initially received by the most specific element (the node with the deepest nesting level in the document) and then propagated up to the least specific node (document).
Event capture: A less specific node should receive an event earlier, and the most specific node receives the event at the end.
DOM2-level Event handlers:
. AddEventListener (); . RemoveEventListener ();
does not work in IE browser! IE Event handlers:
. attachevent (); . DetachEvent ();
cross-browser common event handlers:
var eventutil = {
Add handle
Addhandler:function (Element,type,handler) {
if (Element.addeventlistener) {//dom2 level Event listener
Element.addeventlistener (Type,handler,false);
}else if (element.attachevent) {//ie Browser event listener
Element.attachevent (' on ' +type,handler);
}else{//Legacy Browser Event listener
element[' on ' +type]=handler;
}
},
Delete Handle
Removehandler:function (Element,type,handler) {
if (Element.removeeventlistener) {//dom2 level Event listener
Element.removeeventlistener (Type,handler,false);
}else if (element.detachevent) {//ie Browser event listener
Element.detachevent (' on ' +type,handler);
}else{//Legacy Browser Event listener
element[' on ' +type]=null;
}
},
Get events
Getevent:function (event) {
return event?event:window.event;
},
Get Event Type
Gettype:function (event) {
return event.type;
},
Get the event target (which element the event originates from)
Getelement:function (event) {
return Event.target | | Event.srcelement;
};
Block default behavior
Preventdefault:function (event) {
if (Event.preventdefault) {
Event.preventdefault ();
}else{
Event.returnvalue=false;
}
},
Block bubbling Behavior
Stoppropagation:function (event) {
if (event.stoppropagation) {
Event.stoppropagation ();
}else{
Event.cancelbubble=true;
}
}
}
Examples of use: Eventutil.addhandler (Element ID, ' click ', function name);
Eventutil.removehandler (element ID, ' click ', function name);
DOM. Preventdefault () method: Block The default behavior of an event, such as: <a href= ' # ' > Hyperlinks </a>
Default behavior for blocking events with the ReturnValue property in IE: set to False to indicate the default behavior of blocking events
Get event Target:
Dom.target. Ie.srcelement.
Example: event = Event | | window.event; Because of the difference from the previous version of the browser
var ele = Event.target | | Event.srcelement; Because the difference between DOM and IE
DOM . Stoppropagation () method: Used to block event bubbling
IE uses the Cancelbubble property to block time bubbling: set to true to prevent bubbling and set to false to not block bubbling
JavaScript differences between DOM event object, ie event object, old browser event object