12. 事件绑定的两种方式有事什么区别

约 931 字大约 3 分钟

2025-03-12

addEventListener 和 on事件（如 onclick、onload）是 JavaScript 中用于绑定事件处理程序的两种方式，它们在功能和使用上有显著区别。以下是详细对比：

一、区别

1、语法与使用方式

addEventListener： 通过 js 给元素添加事件

const button = document.querySelector("button");
button.addEventListener("click", () => {
  console.log("按钮被点击了");
});

on 事件： 通过 js 和 html 添加

<button onclick="handleClick()">Click me</button>
<script>
  const button = document.querySelector("button");
  button.onclick = () => {
    console.log("按钮被点击了");
  };
</script>

2、事件处理程序的数量

addEventListener： 可以为同一个事件绑定多个处理程序。

button.addEventListener("click", () => {
  console.log("处理程序1");
});
button.addEventListener("click", () => {
  console.log("处理程序2");
});
// 点击按钮时，两个处理程序都会执行

on 事件： 只能绑定一个处理程序，后绑定的会覆盖之前的。

button.onclick = () => {
  console.log("处理程序1");
};
button.onclick = () => {
  console.log("处理程序2");
};
// 点击按钮时，只有“处理程序2”会执行

3、事件传播阶段

addEventListener： 可以通过 options 参数控制事件处理程序在捕获阶段还是冒泡阶段执行。

button.addEventListener(
  "click",
  () => {
    console.log("冒泡阶段");
  },
  false
); // 默认是冒泡阶段（false）
button.addEventListener(
  "click",
  () => {
    console.log("捕获阶段");
  },
  true
); // 捕获阶段（true）

on 事件： 只能在冒泡阶段执行，无法控制事件传播阶段。

4、移除事件监听

addEventListener： 可以通过 removeEventListener 移除事件监听。

const handler = () => {
  console.log("按钮被点击了");
};
button.addEventListener("click", handler);
button.removeEventListener("click", handler); // 移除事件监听

on 事件： 通过将 on事件 设置为 null 移除事件监听。

button.onclick = () => {
  console.log("按钮被点击了");
};
button.onclick = null; // 移除事件监听

5、兼容性

addEventListener： 支持所有现代浏览器。不支持 IE8 及以下版本。
on 事件： 支持所有浏览器，包括旧版 IE。

6、事件对象

addEventListener： 事件处理程序会接收一个 Event 对象作为参数。

button.addEventListener("click", (event) => {
  console.log(event.target); // 触发事件的元素
});

on 事件： 事件处理程序也会接收一个 Event 对象作为参数。

button.onclick = (event) => {
  console.log(event.target); // 触发事件的元素
};

7、动态绑定

addEventListener： 可以在运行时动态绑定和移除事件监听，可以绑定多个事件。

if (condition) {
  button.addEventListener("click", handler);
} else {
  button.removeEventListener("click", handler);
}

on 事件： 也可以动态绑定，但只能绑定一个处理程序

if (condition) {
  button.onclick = handler;
} else {
  button.onclick = null;
}

8、性能

addEventListener：性能稍低，因为需要维护事件监听器列表。
on事件：性能稍高，因为直接赋值。

9. 适用场景

addEventListener：
- 需要绑定多个事件处理程序。
- 需要控制事件传播阶段（捕获或冒泡）。
- 需要动态绑定和移除事件监听。
- 现代浏览器环境。
on事件：
- 只需要绑定一个事件处理程序。
- 需要兼容旧版浏览器（如 IE8 及以下）。
- 简单场景，代码量较少。

二、总结对比

特性	`addEventListener`	`on事件`
绑定多个处理程序	支持	不支持（会覆盖）
事件传播阶段控制	支持（捕获或冒泡）	仅冒泡阶段
移除事件监听	`removeEventListener`	设置为 `null`
兼容性	不支持 IE8 及以下	支持所有浏览器
事件对象	支持	支持
动态绑定	支持	支持
性能	稍低	稍高
适用场景	复杂场景，现代浏览器	简单场景，兼容旧版浏览器

三、推荐使用

现代项目：优先使用 addEventListener，功能更强大且灵活。
兼容旧版浏览器：使用 on事件。
简单场景：如果只需要绑定一个处理程序且不需要复杂功能，可以使用 on事件。

更新日志

2025/8/24 08:17

查看所有更新日志

e7112-1于 2025/8/24