Analysis of addEventListener() and removeEventListener() in js

This article mainly introduces addEventListener() and removeEventListener() in detail, which are used to handle the operation of specifying and deleting event handlers. It has certain reference value. Interested friends can refer to it

addEventListener() and removeEventListener() are used to handle specifying and removing event handler operations.
All DOM nodes contain these two methods, and they both accept 3 parameters: the name of the event to be processed, the function as the event handler, and a Boolean value.

The last Boolean parameter is true, which means the event handler is called during the capture phase;
If it is false (false-default), it means the event handler is called during the bubbling phase.

There are three parameters for addEventListener. The syntax is:
element.addEventListener(type,listener,useCapture)

The following is a detailed explanation:
1. Element is the object to which the function is to be bound.
2. Type is the event name. It should be noted that "onclick" should be changed to "click" and "onblur" should be changed to "blur", which means that the event name should not contain "on".
3. The listener is of course the bound function. Remember not to follow the brackets
4. The last parameter is a Boolean value, indicating the response sequence of the event. Let’s focus on the third parameter of addEventListener (useCapture ).

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

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

The main benefits of adding event handlers using DOM2 level methods It is possible to add multiple event handlers. 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();

When removed The parameters passed in are the same as those used when adding the handler.
This also means that anonymous functions added via 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 () { //无效！
   alert(this.id);
}, false);

In this In the example, I use addEventListener() to add an event handler.
Although calling removeEventListener seems to use the same parameters
, in fact, the second parameter is a completely different function from the one passed into addEventListener().
The event handler function passed into removeEventListener() must be the same as the one passed into addEventListener(),

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); //有效！

There is no problem with this rewritten example because the same function is used in addEventListener() and removeEventListener().
The experimental result is that when the user clicks the button, "I have been clicked!" will be output every time, indicating that the removeEventListener() function does not work.

Draw conclusions by searching for information. When using the removeEventListener() function, the handler function must be the same as the handler function in addEventListener().

So the code written above is wrong. The corrected code should be as follows:

//addEventListener()和removeEventListener()中handler函数必须相同，移除事件函数才有效。
function myhandler(){
  console.log("I have been clicked!");
  document.getElementById('info').removeEventListener('click',myhandler,false);
}
var target=document.getElementById('info');
target.addEventListener("click", myhandler, false);
target.removeEventListener("click", myhandler, false); //有效！

Students who need to learn js please pay attention to php Chinese website js video tutorial, many js online video tutorials are free Watch!

The above is the detailed content of Analysis of addEventListener() and removeEventListener() in js. For more information, please follow other related articles on the PHP Chinese website!