JavaScript HTML DOM 事件监听器

addEventListener() 方法

这个addEventListener()方法将事件处理程序附加到指定的元素。

这个addEventListener()方法将事件处理程序附加到元素，而不覆盖现有的事件处理程序。

您可以向一个元素添加多个事件处理程序。

您可以向一个元素添加多个相同类型的事件处理程序，即两个"click" 事件。

您可以将事件侦听器添加到任何 DOM 对象，而不仅仅是 HTML 元素。即窗口对象。

这个addEventListener()方法可以更轻松地控制事件对冒泡的反应。

当使用addEventListener()方法中，JavaScript 与 HTML 标记分离，以提高可读性，并且即使您不控制 HTML 标记，也允许您添加事件侦听器。

您可以使用以下命令轻松删除事件侦听器removeEventListener()方法。

语法

第一个参数是事件的类型（例如“click" 或 "mousedown“或任何其他HTML DOM 事件.)

第二个参数是事件发生时我们要调用的函数。

第三个参数是一个布尔值，指定是使用事件冒泡还是事件捕获。该参数是可选的。

向元素添加事件处理程序

您还可以引用外部"named"函数：

向同一元素添加多个事件处理程序

这个addEventListener()方法允许您将多个事件添加到同一元素，而不覆盖现有事件：

您可以将不同类型的事件添加到同一元素：

将事件处理程序添加到窗口对象

这个addEventListener()方法允许您在任何 HTML DOM 对象上添加事件侦听器，例如 HTML 元素、HTML 文档、窗口对象或其他支持事件的对象，例如xmlHttpRequest目的。

传递参数

传递参数值时，使用 "anonymous function" 来调用带有参数的指定函数：

事件冒泡还是事件捕获？

HTML DOM 中有两种事件传播方式：冒泡和捕获。

事件传播是一种定义事件发生时元素顺序的方法。如果 <div> 元素内有一个 <p> 元素，并且用户单击 <p> 元素，则应首先处理哪个元素的 "click" 事件？

在冒泡首先处理最内部元素的事件，然后处理外部元素的事件：首先处理 <p> 元素的单击事件，然后处理 <div> 元素的单击事件。

在捕获首先处理最外面元素的事件，然后处理内部元素：首先处理 <div> 元素的单击事件，然后处理 <p> 元素的单击事件。

通过 addEventListener() 方法，您可以使用 "useCapture" 参数指定传播类型：

默认值为 false，将使用冒泡传播，当该值设置为 true 时，事件将使用捕获传播。

移除事件监听器()方法

这个removeEventListener()方法删除已使用 addEventListener() 方法附加的事件处理程序：

HTML DOM 事件对象参考

有关所有 HTML DOM 事件的列表，请查看我们完整的HTML DOM 事件对象参考。

<button id="demo"></button>

<script>
document.getElementById("demo").("", myFunction);
</script>