AddEventListener () and RemoveEventListener () are used to handle the specified and deleted event handler actions. Both methods are included in all DOM nodes, and they all accept 3 parameters: The time name to process, the function as the event handler, and a Boolean value. The last Boolean parameter is true, which means that the event handler is invoked during the capture phase, or false, which indicates that the event handler is invoked during the bubbling phase.
There are three parameters for AddEventListener, and the syntax is:
Element.addeventlistener (Type,listener,usecapture)
Here is the detailed
• Where element is the object to bind the function to.
type is the event name, note that "onclick" is changed to "click", "onblur" to "blur", which means that the event name does not have "on".
Listener Of course is the binding function, remember not to follow the parentheses
• The last parameter is a Boolean value that represents the order of response for the event, and the following highlights the 3rd parameter (usecapture) of AddEventListener.
To add an event handler for the Click event on the button, you can use the following code:
| The code is as follows | Copy Code |
| var btn = document.getElementById ("mybtn"); Btn.addeventlistener ("click", Function () { alert (this.id); }, False); |
|
The primary benefit of adding an event handler using the DOM2-level method is that you can add multiple event handlers. Look at the following example:
| The code is as follows | Copy Code |
var btn = document.getElementById ("mybtn"); |
|
Event handlers added through AddEventListener () can only be removed by using RemoveEventListener (), and the parameters passed in when they are removed are the same as those used when the handler was added. This also means that anonymous functions added through AddEventListener () cannot be removed, as 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 calling RemoveEventListener (0 is seemingly using the same argument, in fact, the second argument is a completely different function from the one passed into the AddEventListener (). The event handler function in the incoming RemoveEventListener () must be the same as in the incoming 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); Effective! The rewrite of this example is not problematic because of the AddEventListener () and RemoveEventListener () |
|
The same function used in the
In most cases, you add event handlers 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 if you need to intercept it before it is time to reach the target. If it is not specifically required, we do not recommend registering event handlers during the event capture phase.
The result of the experiment is that when the user clicks the button, the "I have been clicked!" is output each time, indicating that the RemoveEventListener () function does not work. By looking for information, we draw a conclusion. When using the RemoveEventListener () function, the handler function must be the same as the handler function in the AddEventListener (). So the code written above is wrong. The revised code should read as follows:
| The code is as follows | Copy Code |
| <body> |
|
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
