JavaScript differences between DOM event object, ie event object, old browser event object

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