Detailed explanation of the difference between addEventListener and on-JS Tutorial-php.cn

Detailed explanation of the difference between addEventListener and on

黄舟

Release： 2017-12-04 15:25:03

Original

2470 people have browsed it

We introduced you to the use of addEventListener in JavaScript in a previous article. I believe that everyone has a better understanding of addEventListener, so today we will continue to introduce to you the detailed explanation of addEventListener. The difference with on!

Why do you need addEventListener?

Let’s take a look at a snippet first:

html code

<div id="box">追梦子</div>

Copy after login

Use the code of on

window.onload = function(){
    var box = document.getElementById("box");
    box.onclick = function(){
        console.log("我是box1");
    }
    box.onclick = function(){
        box.style.fontSize = "18px";
        console.log("我是box2");
    }
}
　　　　　运行结果：“我是box2”

Copy after login

See it, the second onclick replaces the first one onclick is covered. Although in most cases we can use on to achieve the results we want, but sometimes we need to execute multiple identical events. Obviously, if we use on, we cannot achieve what we want. , then there’s no need to guess, you must know it, right! addEventListener can bind the same event multiple times and will not overwrite the previous event.

Use the code of addEventListener

window.onload = function(){
    var box = document.getElementById("box");
    box.addEventListener("click",function(){
        console.log("我是box1");
    })
    box.addEventListener("click",function(){
        console.log("我是box2");
    })
}
　　　　运行结果：我是box1
　　　　　　　　　我是box2

Copy after login

The first parameter of the addEventListenert method is to fill in the event name. Note that there is no need to write on. The second parameter can be a function, and the third parameter refers to the risk. Bubble phase or capture phase processingEvent processingProgram, if true represents capture phase processing, if false represents bubbling phase processing, the third parameter can be omitted, and in most cases there is no need to use the third parameter Parameter, if you don’t write the third parameter, the default is false

Use of the third parameter

Sometimes the situation is like this

<body>
　　<div id="box">
　　　　<div id="child"></div>
　　</div>
</body>

Copy after login

If I add a click event to the box , if I click directly on the box, there is no problem, but if I click on the child element, how does it perform? (Execution order)

box.addEventListener("click",function(){
    console.log("box");
})

child.addEventListener("click",function(){
    console.log("child");
})
　　执行的结果：
　　　　　　　　child
　　　　　　　　box

Copy after login

In other words, by default, events are executed in the order in which events bubble up.

If the third parameter is written as true, the execution order of event capture will be followed.

box.addEventListener("click",function(){
    console.log("box");
},true)

child.addEventListener("click",function(){
    console.log("child");
})
　　执行的结果：
　　　　　　　　box
　　　　　　　　child

Copy after login

Event bubbling execution process:

Starting from the most specific element (the element you clicked), the bubbling starts upward. Taking our case above, the order is: child->box

Event capture execution process:

Starting from the least specific element (the outermost box), bubbles start to bubble inside. Take our above case to talk about its order. Yes: box->child

##Summary:

Details the difference between addEventListener and on through the example method, detailed friends We have a better understanding of the use of addEventListener and on. I hope it will be helpful to your work!

Related recommendations:

Detailed explanation of the use of addEventListener in JavaScript

javascript DOM object learning event flow addEventListener() usage tutorial

Analysis of addEventListener() and removeEventListener() in js

The above is the detailed content of Detailed explanation of the difference between addEventListener and on. For more information, please follow other related articles on the PHP Chinese website!