onclick与addEventListener区别

[TieMuZhen]

区别

• onclick对一个对象绑定了多次后，只会执行最后的一次绑定；addEventListener多次绑定的事件，都能够按照顺序运行
• addEventListener可以控制listener的触发阶段（捕获/冒泡）。

代码

<div class="container">
    <div class="add_listener"></div>
    <div class="add_click"></div>
</div>

onclick

var div = document.getElementsByClassName('add_click')[0];
div.onclick = function(){
    console.log('click1');
}
div.onclick = function(){
    console.log('click2');
}

// click2

addEventListener

var div = document.getElementsByClassName('add_listener')[0];
div.addEventListener('click', function(){
    console.log('1');
}, false)
div.addEventListener('click', function(){
    console.log('2');
}, false)

// 1
// 2

移除 <div> 元素的事件

document.getElementsByClassName("add_listener")[0].removeEventListener("click", () => 3);