JavaScript Event Model Example analysis _javascript techniques

This example describes the use of the JavaScript event model. Share to everyone for your reference. The specific analysis is as follows:

One, event model

Bubbling event (Bubbling): The event is passed up from the leaf node to the root node along the ancestor node
Capture Event (capturing): The topmost element of the DOM tree to the most precise element, contrary to the bubbling event
DOM Standard event Model: The DOM standard supports both bubbling events and capture events, which can be said to be a combination of the two, first capturing, and then bubbling

Second, the event object

The event object is an attribute of window in IE Explorer, and in the DOM standard the event must be passed as a unique parameter to the handler function

To obtain a compatible event object:

function (event) { 
  //event is a parameter incoming 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 attribute
Get the element that the compatible event object points to:

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

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

Third, event listeners

IE, registered listeners 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

Under the DOM standard:

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

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

Iv. Event Delivery

To cancel the browser's 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 
} 

Cancels the default processing after event passing

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 with your JavaScript programming.