Javascript event model

Javascript event model

Event Model

Bubble events(Bubbling): Events are transmitted from the leaf node to the root node along the ancestor node.

Captured events(Capturing): From the top element of the DOM tree to the most precise element, opposite to the bubble event.

DOM standard event model: the DOM standard supports both bubble events and capture events. It can be said that it is a combination of the two. The first is the capture type, followed by the bubble transfer.

Event object

In IE browser, the event object is an attribute of window. In DOM standard, the event must be passed as a unique parameter to the event handler function.

Get compatible event objects:

Function (event) {// event is passed into the processing function event = event as a DOM standard parameter? Event: window. event ;}

In IE, the event object is included in the srcElement of the event, and in the DOM standard, the object is included in the target attribute.

Elements to which compatible event objects point:

var target =event.srcElement ? event.srcElement : event.target ;

Ensure that the event object has been correctly obtained.

Event listener

In IE, the listener for registration is executed in reverse order, that is, the listener for subsequent registration is executed first.

Element. attachEvent ('onclick', observer); // register the listener element. detachEvent ('onclick', observer) // remove the listener

The first parameter is the event name, and the second parameter is the callback handler function.

Under the DOM standard:

element.addEventListener('click',observer,useCapture)element.removeEventListener('click',observer,useCapture)

The first parameter is the event name without the "on" prefix. The second parameter is the callback handler. The third parameter indicates whether the callback function is called in the capture or bubble phase, the default value "true" indicates the capture phase.

Event Transfer

Cancel browser event transfer with compatibility

Function someHandler (event) {event = event | window. event; if (event. stopPropagation) // DOM standard event. stopPropagation (); else event. cancelBubble = true; // IE standard}

Cancel default processing after event Transfer

Function someHandler (event) {event = event | window. event; if (event. preventDefault) // DOM standard event. preventDefault (); else event. returnValue = true; // IE standard}