JS event Monitoring Mechanism (event capture) summary _javascript skills

In the front-end development process, we often encounter problems with adding events to page elements, add the event of the JS method is also a lot of directly added to the page structure, there is a use of some JS event monitoring method, due to the different browser event bubbling event monitoring mechanism, le browser only event bubbling, There is no mechanism for event sniffing, and compatibility issues with event sniffing are the biggest challenges:

1. Write the method of the event directly on the page structure

function Eventfun () { 
//console.log (this); 
} 
<input type= "button" onclick= "Eventfun ()" value= "button"/>//here is a question about this scope, Eventfun again here is a global function, the object is Window],this is pointing to window.

To resolve the problem with this scope, you can use a method that adds an event variable to a global function to pass the This object as a parameter to the function inside the page structure

<input type= "button" onclick= "eventfun2 (This)" value= "button2"/> 
function eventfun2 (Eve) {// This is where the event object is passed as a parameter to the global method 
eve.name= "Alex"; 
Window.name= "Robin"; 
Console.log (this);//[object Window] 
Console.log (Eve);//[Object Htmlinputelement] 
console.log (this.name) ;//Robin 
Console.log (eve.name);//Alexvar 
Self=eve; 
Console.log (this.name);//robin 
Console.log (self.name);//alex 
alert (window.name) 
; alert (self.name); 
}

2. Using a method to assign a value to an event property is a way to bind to an event, but the limitation of this approach is that only one method can be bound for the event, and if multiple bindings are followed, then one method will prevail.

Htmlelementobject.onclick = Fucntion () {//using this method of assigning a value to an event property, this pointer points to a Window object rather than being an event object, so this method is a reference

JS Code 
fun1 (); 
Fun2 (); 
Fun3 (); 
Console.log (this);//window.object 
} 
function dosomething () { 
//js code 
} 
Htmlelementobject.onclick = dosomething;//uses this form of assigning values to event object properties, this pointer points to the event execution Object 
Console.log (this); Htmlelementobject

3. Event propagation-bubbling and capturing
The DOM event standard defines two event flows, which are significantly different and may have considerable impact on your application. The two event streams are captured and bubbling, respectively. Like many web technologies, Netscape and Microsoft implemented them differently before they became standard. Netscape chose to implement the capture event stream, while Microsoft implemented the bubbling event stream. Fortunately, the consortium decides to use both methods, and most new browsers follow these two types of event flow.
By default, events use a bubbling event stream and do not use a capture event stream. However, in Firefox and Safari, you can explicitly specify the use of a capture event stream by passing in the Usecapture argument when registering the event, and setting this argument to true.
Bubbling event Stream
When an event is triggered by a DOM element, the for example, when a user clicks on a client name node, the event bubbles through the entire DOM node hierarchy with each parent node that the node inherits from, until it encounters a node that is attached to the processor of that event type, at which point the event is the onclick event. You can terminate the bubbling of events at any time during the bubbling process, and you can use the Stoppropagation () method on the event object on the Internet in a browser that complies with the standard. The Explorer can be true by setting the Cancelbubble property of the event object. If you do not stop the propagation of the event, the event continues to bubble through the DOM until the document root is reached.
Capturing an event stream
The processing of the event begins at the root of the DOM hierarchy, rather than from the target element that triggers the event, which is passed in sequence from all ancestor elements of the target element. In this process, events are captured by elements that derive from the document root to the event target element, and if the event listener sets the Usecapture property to True when it is registered, then they can be assigned to any element of the period to handle the event; The event is then passed to the next element on the path of the derived element, until the target element. When an event reaches the target element, it then bubbles through the DOM node.
Modern event binding methods
As discussed in the previous lesson, there are many drawbacks to using traditional event bindings, such as the inability to register multiple event handlers on the same event for an object. Browsers and the web also do not take this into account, so in modern browsers they have their own way of binding events.
The Consortium DOM
Obj.addeventlistener (Evtype,fn,usecapture)--W3C provides methods for adding event-handling functions. Obj is the object to add the event, Evtype is the event type, without the on prefix, FN is the event handler, and if Usecapture is true, the event handler function is executed during the capture phase, otherwise in the bubbling phase
Obj.removeeventlistener (evtype,fn,usecapture)--W3C provides a method for deleting an event handler function
Microsoft IE method
Obj.attachevent (EVTYPE,FN)--ie provides methods for adding event-handling functions. Obj is the object to add the event, Evtype is the event type, with the on prefix, FN is the event handler, IE does not support event capture
Obj.detachevent (EVTYPE,FN,)--ie The method that deletes the event handler function, Evtype contains the on prefix

Ways to integrate both

function Addevent (obj,evtype,fn,usecapture) { 
if (obj.addeventlistener) { 
Obj.addeventlistener (EVTYPE,FN, usecapture); 
} else { 
obj.attachevent ("on" +EVTYPE,FN);//ie does not support event capture 
} else { 
obj["on" +evtype]=fn;//in fact this does not exist 
} 
} 
function Delevent (obj,evtype,fn,usecapture) { 
if (obj.removeeventlistener) { 
Obj.removeeventlistener ( evtype,fn,usecapture); 
} else { 
obj.detachevent ("on" +EVTYPE,FN); 
} else { 
obj[' on ' +evtype]=null; 
} 
}

The problem with IE's attach approach is that, inside the event handler function when using attachevent, this points to window instead of obj! Of course, this one has a solution!

But IE's Attachevent method has another problem, the same function can be registered to the same object on the same event many times, the solution: to discard the attachevent method of IE! ie, the Attachevent method does not support capture, and traditional event registration is not much different (in addition to the ability to bind multiple event handlers), and IE's Attachevent method has a memory leak problem!
Addevent,delevent Modern version

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  

PS: Here again for you to provide a JS event on the online tool, summed up the JS commonly used event types and function functions:

JavaScript event and Feature description encyclopedia:

Http://tools.jb51.net/table/javascript_event