在 web 开发中，我们经常需要为页面上的元素添加事件监听器，以便在特定事件发生时执行相应的操作。而在 HTML DOM 中，我们可以通过使用 addEventListener() 方法来为元素添加事件监听器。
addEventListener() 方法概述
addEventListener() 方法是用来向指定元素添加事件监听器的标准方法。它接受三个参数：事件类型、事件处理函数和一个可选的布尔值参数，用来指定事件是在捕获阶段还是冒泡阶段执行。
语法如下：
------------------------------- --------- ------------
- event: 表示要监听的事件类型，比如 'click'、'mouseover' 等。
- function: 是事件发生时要执行的函数。
- useCapture: 一个布尔值参数，可选，默认值为 false。如果为 true，则表示在捕获阶段执行事件处理函数，为 false 则表示在冒泡阶段执行。
示例代码
下面是一个简单的示例，演示如何使用 addEventListener() 方法为一个按钮元素添加点击事件监听器：
--------- -----
------
------
----------------------- ----------
-------
------
------- --------------------------
--------
--- ------ - ------------------------------------
-------------------------------- ---------- -
-----------------
---
---------
-------
-------在上面的示例中，我们首先通过 document.getElementById() 方法获取了一个 id 为 'myButton' 的按钮元素，然后使用 addEventListener() 方法为按钮元素添加了一个点击事件监听器。当按钮被点击时，会弹出一个提示框显示 '你点击了按钮！'。
事件处理函数
在 addEventListener() 方法中，第二个参数是一个函数，即事件处理函数。这个函数会在指定的事件发生时被调用。在事件处理函数中，我们可以编写相应的代码来处理事件。
-------------------------------- ---------- -
-- --------------
---捕获和冒泡
在 addEventListener() 方法的第三个参数 useCapture 中，我们可以指定事件处理函数是在捕获阶段还是冒泡阶段执行。如果 useCapture 为 true，则表示在捕获阶段执行事件处理函数；如果为 false，则表示在冒泡阶段执行。
-------------------------------- ---------- -
-- -------------
-- -------结语
通过使用 addEventListener() 方法，我们可以很方便地为 HTML DOM 元素添加事件监听器，实现页面交互效果。希望本文对你有所帮助，谢谢阅读！