Summary
When we want to bind an event to a DOM element, the most common method is through on + event name. In the DOM2 level event, two methods are defined to handle the operation of specifying and deleting event handlers:
addEventListener () and removeEventListener ().
And they all accept three parameters: the name of the event to be processed, as one of the event processing function, a boolean value.
If the last Boolean value is false, it means that the event handler is called during the bubbling phase, and if it is true, it means that the event handler is called during the capture phase.
Difference 1: Bind multiple events at the same time
Let's think about a question, can we use the onclick method to bind multiple events to a button?
Let's try it out:
<button id="btn">点击</button>
<script>
btn.onclick = function(){
console.log('第一次点击');
}
btn.onclick = function(){
console.log('第二次点击');
}
</script>
Then let's see if the results are printed twice:
we can see that only the second time is effective, which means that the second binding event will overwrite the first time through this method!
Now let's use the second method:
<button id="btn">点击</button>
<script>
btn.addEventListener('click',()=>{
console.log('第一次点击');},false);
btn.addEventListener('click',()=>{
console.log('第二次点击'),false});
</script>
Let's take a look at the running results:
OK, we can see that we can perform multiple binding events in this way.
2. Determine the event trigger sequence
Let's take a look at the code first:
<div id="div1">
<button id="btn">点击</button>
</div>
<script>
div1.onclick = function(){
console.log('div1的事件');
}
btn.onclick = function(){
console.log('btn的事件');
}
</script>
Think about what the order of printing should look like if we click the button?
It can be seen that it is executed from the inside out in the way of event bubbling.
Whereas if using another method:
<div id="div1">
<button id="btn">点击</button>
</div>
<script>
btn.onclick = function(){
console.log('btn的事件');
}
div1.addEventListener('click',()=>{
console.log('div1的事件');},true);
</script>
I now bind the event of div1 through addEventListener, and set the third parameter to true.
Then the result is like this:
so we use the second method to determine whether the triggering of DOM events is the event flow of event capture or the event flow of event bubbling .
3. How to use removeEventListener
This method is to delete the event specified by DOM. If we delete onclick, just set the value of onclick to null.
How to delete this method? Let's take a look at the code:
div1.addEventListener('click',()=>{
console.log('div1的事件');},true);
div1.removeEventListener('click',()=>{
console.log('div1的事件');},true);
Can we delete this event if we do this? The answer is no. Although our two event handlers have the same code, they are indeed not an event handler. If we want to delete an event, we must do this:
var fn = function(){
console.log('div1的事件');
}
div1.addEventListener('click',fn,true);
div1.removeEventListener('click',fn,true);
Only in this way can it be determined that what the two methods use is an event handler, which is also a valid deletion method.