JavaScript中为浏览器DOM添加Event Listener的不同方式有哪些？

你目前使用的addEventListener是W3C推荐的标准实现，也是目前生产环境最常用的方案，除此之外还有以下几种可行的实现方式： #

1. HTML行内事件属性绑定 #

直接在HTML标签的事件属性中声明触发逻辑，不需要额外通过JS选中元素绑定：

<!-- 直接在标签上写on[事件名]属性，值为要执行的JS代码 -->
<button id="btn" onclick="sayHello()">点击触发</button>
<script>
let div = document.getElementById("div");
function sayHello() {
    div.innerText = "Hello World";
    console.log("awesome");
}
</script>

特点：

• 写法简单，适合快速测试小功能
• 视图和逻辑强耦合，项目体量稍大就很难维护，不推荐生产环境使用
• 同一个元素的同类型事件只能绑定一个处理逻辑，重复声明会覆盖

2. DOM元素on[event]属性赋值 #

选中DOM元素后，直接给元素对应的事件属性赋值处理函数：

let div = document.getElementById("div");
let btn = document.getElementById("btn");

function sayHello() {
    div.innerText = "Hello World";
    console.log("awesome");
}

// 直接给onclick属性赋值函数
btn.onclick = sayHello;

// 解绑方式
// btn.onclick = null;

特点：

• 兼容性极好，所有浏览器都支持
• 同一个元素的同类型事件只能绑定一个处理函数，重复赋值会覆盖之前的逻辑

3. 标准addEventListener方法（你正在使用的方案） #

这是目前最推荐的生产环境实现方案：

let div = document.getElementById("div");
let btn = document.getElementById("btn");

function sayHello() {
    div.innerText = "Hello World";
    console.log("awesome");
}

// 绑定事件，第三个参数可指定是否在捕获阶段触发，默认false（冒泡阶段触发）
btn.addEventListener("click", sayHello);

// 解绑方式，必须传入和绑定时完全一致的函数引用，匿名函数无法解绑
// btn.removeEventListener("click", sayHello);

特点：

• 同一个元素的同类型事件可以绑定多个不同的处理函数，不会互相覆盖
• 可以灵活指定事件触发的阶段（捕获/冒泡）
• 支持事件委托等高级用法

4. IE旧版本专属attachEvent（已淘汰） #

仅适用于IE9以下的IE浏览器，现在几乎没有兼容需求，可以了解即可：

// 仅IE6-IE8支持
btn.attachEvent("onclick", sayHello);
// 解绑用detachEvent
// btn.detachEvent("onclick", sayHello);

内容的提问来源于stack exchange，提问作者Nicholas Oyagha