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

·  阅读 511

addEventListener 与 on 绑定事件的区别:

  1. 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
复制代码
  1. addEventListener对任何DOM都是有效的,而onclick仅限于HTML。
  2. on 事件解绑需要将其置为none,而addEventListener需要使用removeEventListener。
// on 绑定
window.onresize = function () { // ... }
// on 解绑
window.onresize = none

// addEventListener 绑定
window.addEventListener('resize', function () { // ... }, false)
// addEventListener 解绑
window.removeEventListener('resize', function () { // ... }, false)
复制代码
分类:
前端
标签:
分类:
前端
标签: