JavaScript's event model

Event model

bubbling Event (bubbling): The event is passed from the leaf node up to the root node along the ancestor node

Capture-type event (capturing): from the topmost element of the DOM tree to the most precise element, as opposed to bubbling events

DOM Standard event Model: The DOM standard supports both bubble-type events and capture-type events, which can be said to be a combination of the two, first the capture type, then the bubbling Pass

Event Object

In IE, the event object is a property of window, and in the DOM standard, the event must be passed as a unique parameter to the events handler

To obtain a compatible event object:

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

In IE, the object of the event is contained in the srcelement of the events, and in the DOM standard, the object is contained in the target property

Get the element that the compatible event object points to:

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

The premise is to ensure that the event object has been properly acquired

Event Listener

IE, register the listener in reverse order, that is, after the registration of the first execution

Element.attachevent (' onclick ', observer);   Register Listener element.detachevent (' onclick ', observer)   //Remove Listener

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

Dom Standard:

Element.addeventlistener (' click ', Observer,usecapture) element.removeeventlistener (' click ', observer,usecapture)

The first parameter is the event name, there is no prefix for "on", the second argument is a callback handler, and the third parameter indicates whether the callback function is called during the capture phase or the bubbling phase, and the default is true for the capture phase

Event delivery

Canceling browser event delivery in a compatible manner

function Somehandler (event) {      event = Event | | window.event;      if (event.stoppropagation)   //dom standard      event.stoppropagation ();      else      event.cancelbubble = true;   IE Standard}

Canceling the default processing after an event is passed

function Somehandler (event) {      event = Event | | window.event;      if (event.preventdefault)   //dom Standard      event. Preventdefault ();      else      Event.returnvalue = true;   IE Standard}

JavaScript's event model