JavaScript 是一门非常重要的编程语言，尤其在前端开发中扮演着至关重要的角色。在前端开发中，我们经常需要处理用户与页面的交互，而 addEventListener 是一种非常常用的方法，用于为 DOM 元素绑定事件处理程序。本文将详细介绍 addEventListener 的使用方法，以及 ES10 中的新特性。
addEventListener 的基本使用方法
addEventListener 是一种为 DOM 元素添加事件监听器的方法，其基本语法如下：
------------------------------- ---------- ----------
其中，element 是要绑定事件监听器的 DOM 元素；event 是要绑定的事件类型，如 click、mouseover 等；listener 是事件处理程序函数，也就是当事件触发时要执行的代码；options 是一个可选的配置对象，用于指定事件监听器的行为。
下面是一个简单的示例代码，演示如何使用 addEventListener 监听按钮的点击事件：
------- ---------------------
--------
----- --- - -------------------------------
----------------------------- ---------- -
----------------------
---
---------在上面的代码中，我们首先通过 document.getElementById 方法获取到了按钮元素，然后使用 addEventListener 方法为按钮添加了一个 click 事件监听器。当按钮被点击时，事件处理程序函数就会被执行，控制台就会输出一条日志。
addEventListener 的高级用法
除了基本的使用方法之外，addEventListener 还有一些高级用法，可以帮助我们更加灵活地处理事件。下面我们将介绍一些常用的高级用法。
使用 once 选项
addEventListener 的 options 参数可以接受一个对象，用于指定事件监听器的行为。其中，once 选项可以用来指定事件监听器只执行一次，如下所示：
------------------------------- --------- - ----- ---- ---
使用 once 选项可以避免事件监听器被重复执行的问题，特别适用于只需要执行一次的场景。下面是一个示例代码，演示了如何使用 once 选项：
------- ---------------------
--------
----- --- - -------------------------------
----------------------------- ---------- -
----------------------
-- - ----- ---- ---
---------在上面的代码中，我们使用了 once 选项来指定事件监听器只执行一次。因此，当按钮被点击时，事件处理程序函数就会被执行一次，然后就会自动移除事件监听器。
使用 capture 选项
addEventListener 的 options 参数还可以接受一个 capture 选项，用于指定事件监听器是在捕获阶段还是冒泡阶段被执行。默认情况下，事件监听器是在冒泡阶段被执行的。如果想要在捕获阶段被执行，可以将 capture 选项设置为 true，如下所示：
------------------------------- --------- - -------- ---- ---
使用 capture 选项可以帮助我们更加精细地控制事件的执行顺序。下面是一个示例代码，演示了如何使用 capture 选项：
---- -----------
---- -----------
------- ---------------------
------
------
--------
----- ----- - ---------------------------------
----- ----- - ---------------------------------
----- --- - -------------------------------
------------------------------- ---------- -
------------------ -------
-- - -------- ---- ---
------------------------------- ---------- -
------------------ -------
-- - -------- ---- ---
----------------------------- ---------- -
----------------------
-- - -------- ---- ---
---------在上面的代码中，我们分别为外层 div、内层 div 和按钮元素添加了 click 事件监听器，并使用了 capture 选项。当按钮被点击时，事件处理程序函数会先在外层 div 上执行，然后在内层 div 上执行，最后才在按钮元素上执行。这是因为事件的执行顺序是从外向内，从捕获阶段到冒泡阶段。
使用 passive 选项
addEventListener 的 options 参数还可以接受一个 passive 选项，用于指定事件监听器是否支持 passive 模式。在 passive 模式下，事件监听器不会调用 preventDefault 方法，可以提高页面的滚动性能。如果想要启用 passive 模式，可以将 passive 选项设置为 true，如下所示：
------------------------------- --------- - -------- ---- ---
使用 passive 选项可以帮助我们提高页面的性能，特别适用于移动设备等资源受限的场景。下面是一个示例代码，演示了如何使用 passive 选项：
---- -------------- ---------------
--------
--------------------------------- --------------- -
-----------------------
-- - -------- ---- ---
---------在上面的代码中，我们为 window 对象添加了一个 scroll 事件监听器，并使用了 passive 选项。由于 passive 选项启用了 passvie 模式，因此事件监听器不会调用 preventDefault 方法，可以提高页面的滚动性能。
ES10 中的新特性
除了基本用法和高级用法之外，ES10 中还引入了一些新特性，可以帮助我们更加便捷地使用 addEventListener。下面我们将介绍一些常用的新特性。
可选的参数
ES10 中，addEventListener 方法的 options 参数变成了可选的参数，这意味着我们可以省略 options 参数，直接传递 listener 函数，如下所示：
------------------------------- ----------
使用可选的参数可以简化代码，提高代码的可读性。下面是一个示例代码，演示了如何使用可选的参数：
------- ---------------------
--------
----- --- - -------------------------------
----------------------------- ---------- -
----------------------
---
---------在上面的代码中，我们省略了 options 参数，直接传递了 listener 函数。
使用 once 修饰符
ES10 中，我们可以使用 once 修饰符来指定事件监听器只执行一次，如下所示：
------------------------------- --------- - ----- ---- ---
使用 once 修饰符可以避免事件监听器被重复执行的问题，特别适用于只需要执行一次的场景。下面是一个示例代码，演示了如何使用 once 修饰符：
------- ---------------------
--------
----- --- - -------------------------------
---------------------------------- ---------- -
----------------------
---
---------在上面的代码中，我们使用了 once 修饰符来指定事件监听器只执行一次。因此，当按钮被点击时，事件处理程序函数就会被执行一次，然后就会自动移除事件监听器。
使用 capture 修饰符
ES10 中，我们可以使用 capture 修饰符来指定事件监听器是在捕获阶段还是冒泡阶段被执行。默认情况下，事件监听器是在冒泡阶段被执行的。如果想要在捕获阶段被执行，可以将 capture 修饰符设置为 true，如下所示：
------------------------------- --------- - -------- ---- ---
使用 capture 修饰符可以帮助我们更加精细地控制事件的执行顺序。下面是一个示例代码，演示了如何使用 capture 修饰符：
---- -----------
---- -----------
------- ---------------------
------
------
--------
----- ----- - ---------------------------------
----- ----- - ---------------------------------
----- --- - -------------------------------
--------------------------------------- ---------- -
------------------ -------
---
--------------------------------------- ---------- -
------------------ -------
---
------------------------------------- ---------- -
----------------------
---
---------在上面的代码中，我们分别为外层 div、内层 div 和按钮元素添加了 click 事件监听器，并使用了 capture 修饰符。当按钮被点击时，事件处理程序函数会先在外层 div 上执行，然后在内层 div 上执行，最后才在按钮元素上执行。这是因为事件的执行顺序是从外向内，从捕获阶段到冒泡阶段。
总结
本文详细介绍了 addEventListener 的基本使用方法和高级用法，包括使用 once 选项、capture 选项和 passive 选项。同时，我们还介绍了 ES10 中的新特性，包括可选的参数、once 修饰符和 capture 修饰符。通过学习本文，相信读者已经掌握了 addEventListener 的使用方法，可以在实际开发中灵活运用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65fd6edbd10417a2228cc5a3