AddEventListener () and removeEventListener () parsing, removeeventlistener

AddEventListener () and removeEventListener () parsing, removeeventlistener

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!

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.