Js event listening mechanism of event capture summary

On the front end we often encounter in the development process to add event page elements, a lot of js method also add event, is directly added to the page on the structure and use some method of js event listeners, because each browser on the mechanism of different event bubbling event listeners, le browser only event bubbling, no event monitoring mechanism, compatibility is one of the biggest problem for the event listeners:

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

function eventfun(){ 
//console.log(this); 
} 
<input type="button" onclick="eventfun()" value="button" />// There's one involved here this The problem of scope, eventfun And here is a global function ,  The object is [object Window],this Points to the window.

To solve the problem of this scope, you can use the method of adding an event variable to the global function, passing this object as an argument to the function in the page structure

<input type="button" onclick="eventfun2(this)" value="button2" /> 
function eventfun2(eve){//Here the event object is passed as an argument 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. The method of assigning values to event attributes is a method of binding events. However, the limitation of this method is that only one method can be bound to events

HTMLElementobject. Onclick = fucntion () {/ / to use this for the event attribute assignment method, this pointer will point to the window object, rather than being the 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;//In this form of assigning an event object property, this pointer points to the event execution object
console.log(this);//htmlElementObject

The way to integrate the two

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, that won't happen
} 
} 
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 method is that when you use attachEvent inside the event handler, this points to the window instead of obj! Of course, there is a solution to this!

PS: here to provide you with an online tool about JS events, summed up the common JS event types and functions:

Javascript events and function description:

(link: http://tools.jb51.net/table/javascript_event)