This article summarizes the usage of addEventListener () and removeEventListener (). 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 time name 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 in the capture phase; if it is false, it indicates that the event handler is called in the bubble phase.
The addEventListener has three parameters. Syntax:
Element. addEventListener (type, listener, useCapture)
Below is a detailed explanation
• Element is the object to bind the function.
• Type is the event name. Note that you should change "onclick" to "click" and "onblur" to "blur", that is, the event name should not contain "on ".
• The listener is the bound function. Remember not to enclose it with parentheses.
• 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:
| The Code is as follows: | Copy 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:
| The Code is as follows: | Copy code |
Var btn = document. getElementById ("myBtn "); |
|
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 that the anonymous function added through addEventListener () cannot be removed, as shown in the following example:
| The Code is as follows: | Copy code |
Var btn = document. getElementById ("myBtn "); |
|
In this example, I use addEventListener () to add an event handler. Although removeEventListener is called (0 seems to use the same parameter, in fact, the second parameter is a completely different function from the one passed in addEventListener. The event handler function in removeEventListener () must be the same as that in addEventListener (), as shown in the following example:
| The Code is as follows: | Copy code |
| 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 in addEventListener () and removeEventListener () |
|
Used for the same function.
In most cases, the event handler is added to the bubbling stage of the event stream, which can be compatible with various browsers to the maximum extent. It is best to add the event handler to the capture phase only when it is intercepted before the arrival of the target time. If not, we do not recommend that you register an event handler during the event capture phase.
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 Code is as follows: | Copy code |
<Html> |
|
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
