1 概述
addEventListener 和 直接添加事件的区别!
2 详述
首先,需要讲一下绑定事件的分类,也就是添加事件的方法,在js中,一般分两大类,直接添加和事件监听(这里的说法有待考究);
- test.onclick = function(){}
- test.addEventListener(“click”, function(){})
因为在 js 中不支持事件重载(也就是同时绑定两个一模一样的事件),所以如以下例子:
test.onclick = function() {
console.log("第一个点击事件!不会触发")
}
test.onclick = function() {
console.log("第二个点击事件!会触发")
}
// 打印结果
// 第二个点击事件!会触发
而当使用 addEventListener 时,两个事件都会被触发,如下:
test.addEventListener("click", function(){
console.log("第一个addEventListener!会触发")
})
test.addEventListener("click", function(){
console.log("第二个addEventListener!也会触发")
})
// 打印结果
// 第一个addEventListener!会触发
// 第二个addEventListener!也会触发
不仅如此,addEventListener拥有第三个参数, capture, 事件触发的时间,默认false为冒泡阶段,可以改为true,改成在捕获阶段执行!
详解看博主的另一篇博文!