Javascript event model example analysis _ javascript tips-js tutorial

This article mainly introduces the usage of the javascript event model. It analyzes the definitions and usage skills of the event model, event object, event listener, and event transfer, for more information about how to use the javascript event model, see the example in this article. Share it with you for your reference. The specific analysis is as follows:

I. event model

Bubbling: an event is transmitted from a leaf node to the root node along the parent node.
Capturing: From the top element of the DOM tree to the most precise element, opposite to a 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.

Ii. Event objects

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.

Iii. 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.

Iv. Event Transmission

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}

I hope this article will help you design javascript programs.