addEventListener of and removeEventListener of append events and delete append events

addEventListener () and removeEventListener () are used to append events and delete appends. Both methods are included in all DOM nodes, and they all take three parameters: the name of the event to be handled, the function as the event handler, and a Boolean value.

The last Boolean parameter is true, which means that the event handler is called during the capture phase; If it is false, it means that the event handler is called during the bubble phase. The default is false;;

To add an event handler for an click event on a button, use the following code:

1 var btn = document.getElementById("myBtn");
2 btn.addEventListener("click", function () {
3  alert(this.id);
4 }, false);

The main benefit of adding event handlers using the DOM 2-level approach is that multiple event handlers can be added. Look at the following example:

var btn = document.getElementById("myBtn");
btn.addEventListener("click", function () {
 alert(this.id);
}, false);
btn.addEventListener("click", function () {
 alert("Hello World");
}, false);

Event handlers added through addEventListener () can only be removed using removeEventListener (); The parameters passed in when removing are the same as those used when adding the handler. This also means that anonymous functions added through addEventListener () cannot be removed, as shown in the following example:

var btn = document.getElementById("myBtn");
btn.addEventListener("click", function () {
 alert(this.id);
}, false);
btn.removeEventListener("click", function () { // Invalid! 
 alert(this.id);
}, false);

In this example, removeEventListener cannot delete the event appended by addEventListener because the two methods are not equal and the memory address is already different, as shown in the following example:

var btn = document.getElementById("myBtn");
var handler = function () {
  alert(this.id);
 };
btn.addEventListener("click", handler, false);
btn.removeEventListener("click", handler, false); // Effective! 

The rewritten example has no problem because the same function is used in addEventListener () and removeEventListener ().

In most cases, event handlers are added to the bubbling phase of the event stream to maximize compatibility with various browsers. It is best to add an event handler to the capture phase only when it is necessary to intercept it before it reaches the target. If it is not particularly necessary, we do not recommend registering event handlers during the event capture phase;

Pro-test:

The memory address of the method is 10 points important, 1 must be the same before it can be deleted; Pits that have been tried and encountered:

var clickFun = null;
aa = function(){
 clickFun = function(){
  alert("1")
 }
 window.removeEventListener("click",clickFun,false)
 window.addEventListener("click",clickFun,false)
}
setInterval(function(){
 aa()
},2000)

Demand, it is necessary to constantly plug data into an function, and there will be additions. If it is not deleted, it will be added directly, which is not environmentally friendly and consumes memory, so it is necessary to delete the additions; However, if it is written as above, the memory of clickFun in removeEventListener and addEventListener is not equal, resulting in unsuccessful deletion; The adjustments are as follows:

var clickFun = null;
aa = function(){
  ! clickFun &&  ( window.removeEventListener("click",clickFun,false) ); 
 clickFun = function(){
  alert("1")
 }
 window.addEventListener("click",clickFun,false)
}
setInterval(function(){
 aa()
},2000)

Ensure that the same memory is deleted