addEventListener 和 直接添加事件的区别

1 概述

addEventListener 和 直接添加事件的区别！

2 详述

首先，需要讲一下绑定事件的分类，也就是添加事件的方法，在js中，一般分两大类，直接添加和事件监听（这里的说法有待考究）；

1. test.onclick = function(){}
2. 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，改成在捕获阶段执行！
详解看博主的另一篇博文！