Parse addEventListener () and removeEventListener () in js ()

This article mainly introduces addEventListener () and removeEventListener () in detail, which are used to handle specified and deleted event handler operations. It has some reference value, interested friends can refer to this article for details about addEventListener () and removeEventListener (), which are used to process specified and deleted Event Handlers. This article has some reference value, for more information, see

AddEventListener () and removeEventListener () are used to process specified and deleted event handlers.
All DOM nodes contain these two methods, and both of them accept three parameters: the name of the event to be processed, the function used as the event handler, and a Boolean value.

The Boolean parameter is true, indicating that the event handler is called during the capture phase;
If it is false (false-default), the event handler is called in the bubble stage.

The addEventListener has three parameters. Syntax:
Element. addEventListener (type, listener, useCapture)

The following is a detailed explanation:
1. element is the object to bind the function.
2. type indicates the event name. Note that you should change "onclick" to "click", and "onblur" to "blur", that is, the event name should not contain "on ".
3. The listener is the bound function. Remember not to keep it in brackets.
4. The last parameter is a Boolean value indicating the Event Response sequence. The following describes the 3rd parameters of addEventListener (useCapture ).

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

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

You can add multiple event handlers by using the DOM2-level method. Let's 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);

The event handler added through addEventListener () can only be removed using removeEventListener;

The parameters passed in when the handler is removed are the same as those used when the handler is added.
This also means thatAnonymous functions 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, I use addEventListener () to add an event handler.
Although removeEventListener seems to use the same parameters
But in fact, the second parameter is completely different from the function in the input addEventListener.
The event handler function in removeEventListener () must be the same as that in addEventListener,

The following example shows:

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

There is no problem with this example after rewriting because the same function is used in addEventListener () and removeEventListener.
The experiment result is that when you click the button, "I have been clicked!" Is output every time! ", Indicating that the removeEventListener () function does not play a role.

Find the information and draw a conclusion. When removeEventListener () is used, the handler function must be the same as the handler function in addEventListener.

Therefore, the code written above is incorrect. The corrected code should be as follows:

// The handler functions in addEventListener () and removeEventListener () must be the same, and the event removal function is valid. 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); // valid!

If you need to learn about js, please follow the first PHP community js video tutorial. You can watch many js online video tutorials for free!

The preceding sections describe the details of addEventListener () and removeEventListener () in js. For more information, see other related articles in the first PHP community!