JavaScript 中addEventListener 与 on 绑定事件的区别

addEventListener 与 on 绑定事件的区别：

addEventListener 可以给一个事件注册多个listener，而on在同一时间只能指向唯一对象。

window.onload = function () {
    const container = document.querySelector('#container')
    container.onclick = function () {
        console.log('第一个onclick事件')
    }
    container.onclick = function () {
        console.log('第二个onclick事件')
    }
}
// => 第二个onclick事件

onclick 只会执行第二个事件。

window.onload = function () {
    const container = document.querySelector('#container')
    container.addEventListener('click', function () {
        console.log('第一个onclick事件')
    }, false)
    container.addEventListener('click', function () {
        console.log('第二个onclick事件')
    }, false)
}
// => 第一个onclick事件
// => 第二个onclick事件

addEventListener绑定的两个listener会依次执行。

addEventListener("click",function(){},true);

其中，第三个参数 true 为捕获，false为冒泡，其中false为默认值。

<div class="div1">
    <div class="div2">
        <button class="btn">点击</button>
    </div>
</div>

const div1 = document.querySelector(".div1")
const div2 = document.querySelector(".div2")
const btn = document.querySelector(".btn")

// false 为默认值
window.onload=function(){
    btn.addEventListener("click", function () {
        console.log('btn')
    });
    div2.addEventListener("click", function(){
        console.log('div2')
    })
    div1.addEventListener("click", function(){
        console.log('div1')
    })
}
// => 执行结果 btn  div2  div1 

// 第三个参数为true时
window.onload=function(){
    btn.addEventListener("click", function () {
        console.log('btn')
    }, true);
    div2.addEventListener("click", function(){
        console.log('div2')
    }, true)
    div1.addEventListener("click", function(){
        console.log('div1')
    }, true)
}
// => 执行结果 div1   div2   btn

addEventListener对任何DOM都是有效的，而onclick仅限于HTML。
on 事件解绑需要将其置为none，而addEventListener需要使用removeEventListener。

// on 绑定
window.onresize = function () { // ... }
// on 解绑
window.onresize = none

// addEventListener 绑定
window.addEventListener('resize', function () { // ... }, false)
// addEventListener 解绑
window.removeEventListener('resize', function () { // ... }, false)