Why do I need AddEventListener?
Let's take a look at one fragment:
HTML code
<div id= "box" > Chasing Dream son </div>
Code with On
1 window.onload = function () {2 var box = document.getElementById ("box"), 3 Box.onclick = function () {4 Conso Le.log ("I am Box1"); 5 } 6 Box.onclick = function () {7 box.style.fontSize = "18px"; 8 Console.log ("I am Box2"); 9 }10}
Running result: "I am Box2"
See, the second onclick to the first onclick to cover, although most of the situation we can use on to complete the results we want, but sometimes we need to execute more than the same event, it is clear that if we do not want to use on, then do not guess, you must know, right! AddEventListener can bind the same event multiple times and will not overwrite the previous event.
Using the AddEventListener code
1 window.onload = function () {2 var box = document.getElementById ("box"), 3 box.addeventlistener ("click", Function () {4 console.log ("I am Box1"), 5 }) 6 box.addeventlistener ("click", Function () {7 Console.log ("I Am Box2"); 8 }) 9}
Running result: I'm box1.
I'm box2.
Addeventlistenert method The first parameter fills in the event name, note that there is no need to write on, the second argument can be a function, the third parameter refers to the process of handling event handlers in the bubbling or capturing stages, and if true represents the capture phase processing, If False represents bubbling stage processing, the third parameter can be omitted, and in most cases, the third parameter is not required.
Use of the third parameter
Sometimes this is the case.
<body>
<div id= "box" >
<div id= "Child" ></div>
</div>
</body>
If I add the Click event to box, I don't have a problem if I click the box directly, but what happens if I click on the child element? (Execution order)
1 Box.addeventlistener ("click", Function () {2 console.log ("box"), 3}) 4 5 child.addeventlistener ("click", function () {6 Console.log ("Child"); 7})
Results of execution:
Child
Box
That is, the default event is performed in the order in which the event bubbled up.
If the third parameter is true, it is performed in the order in which the event is captured.
1 Box.addeventlistener ("click", Function () {2 console.log ("box"), 3}) 4 5 child.addeventlistener ("click", function () {6 Console.log ("Child"); 7}) Results of execution: Box childEvent Bubbling Execution Process:
Start bubbling up from the most specific element (the one you clicked on), and take our case to say it's in the order: Child->box
Event Capture Execution Process:
Start bubbling up from the least specific element (the outermost box) and take our case to say its order is: Box->child
The difference between AddEventListener and on
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
