在 JavaScript 世界中，addEventListener 与 on 绑定事件的对比

2024-01-06 15:54:45

前言

在 JavaScript 的世界中，事件处理扮演着至关重要的角色。它使网页能够对用户的操作做出响应，实现诸如按钮点击、鼠标移动、键盘输入等交互行为。而addEventListener与on便是两种常见的事件绑定方式，它们各具特色，在不同的场景下有着不同的应用。本文将深入剖析这两种绑定方式的异同，了解它们的细微差别以及在不同场景下的适用情况。

addEventListener与on：概念解析

addEventListener

addEventListener是一种现代的事件绑定方式，它允许您向元素添加一个或多个事件监听器。当事件发生时，这些监听器将被触发，执行相应的处理程序。addEventListener的语法格式如下：

element.addEventListener(event, callback, options);

其中：

element：要绑定事件的元素。
event：要绑定的事件类型，如"click"、"mouseover"、"keydown"等。
callback：当事件发生时要执行的函数。
options：可选参数，用于指定事件监听器的行为，如是否在捕获阶段触发、是否一次性触发等。

on

on是一种传统的事件绑定方式，它使用HTML元素的on属性来绑定事件处理程序。on属性的语法格式如下：

<element on[event]="callback">

其中：

element：要绑定事件的元素。
event：要绑定的事件类型，如"click"、"mouseover"、"keydown"等。
callback：当事件发生时要执行的函数。

addEventListener与on：比较与对比

相同点

addEventListener和on都可以用于绑定事件处理程序。
addEventListener和on都可以绑定到任何HTML元素。
addEventListener和on都可以绑定多个事件处理程序到同一个元素。

不同点

addEventListener可以给一个事件注册多个listener，而on在同一时间只能指向唯一对象。
addEventListener可以指定事件处理程序在捕获阶段或冒泡阶段触发，而on只能在冒泡阶段触发。
addEventListener可以一次性绑定多个事件处理程序，而on只能逐个绑定事件处理程序。
addEventListener支持事件委托，而on不支持事件委托。

addEventListener与on：适用场景

addEventListener

当您需要向元素添加多个事件监听器时。
当您需要指定事件处理程序在捕获阶段或冒泡阶段触发时。
当您需要一次性绑定多个事件处理程序时。
当您需要使用事件委托时。

on

当您只需要向元素添加一个事件监听器时。
当您只需要在冒泡阶段触发事件处理程序时。
当您只需要逐个绑定事件处理程序时。

addEventListener与on：优缺点

addEventListener

优点：
- 可以给一个事件注册多个listener。
- 可以指定事件处理程序在捕获阶段或冒泡阶段触发。
- 可以一次性绑定多个事件处理程序。
- 支持事件委托。
缺点：
- 语法稍显复杂。
- 不支持IE8及更早版本浏览器。

on

优点：
- 语法简单易懂。
- 支持所有浏览器。
缺点：
- 只能给一个事件注册一个listener。
- 不能指定事件处理程序在捕获阶段或冒泡阶段触发。
- 不能一次性绑定多个事件处理程序。
- 不支持事件委托。

总结

addEventListener和on都是JavaScript中常用的事件绑定方式，它们各具特色，在不同的场景下有着不同的应用。addEventListener更加现代、灵活，支持更多的特性，但语法也稍显复杂。on则更加简单易懂，但功能相对有限。在实际开发中，您需要根据自己的需求选择合适的事件绑定方式。

常见问题解答

1. addEventListener和on哪个更好？

addEventListener和on各有优缺点，没有绝对的好坏之分。在实际开发中，您需要根据自己的需求选择合适的事件绑定方式。

2. addEventListener和on有什么区别？

addEventListener可以给一个事件注册多个listener，而on在同一时间只能指向唯一对象。addEventListener可以指定事件处理程序在捕获阶段或冒泡阶段触发，而on只能在冒泡阶段触发。addEventListener可以一次性绑定多个事件处理程序，而on只能逐个绑定事件处理程序。addEventListener支持事件委托，而on不支持事件委托。