如何在JavaScript中实现addEventListener()方法？
事件是JavaScript的重要组成部分。
网页根据发生的事件做出响应。
有些事件是用户生成的，有些是由API生成的。
什么是事件监听器？
事件侦听器是JavaScript中等待事件发生的过程。
事件的简单示例是用户单击鼠标或者按键盘上的键。
addEventListener()是一个内置JavaScript函数，该函数接受事件进行侦听，并在触发所描述的事件时调用第二个参数。
可以将任意数量的事件处理程序添加到单个元素，而不会覆盖现有的事件处理程序。
JavaScript中的addEventListener()
事件侦听器方法的某些功能包括：
addEventListener()方法将事件处理程序添加到指定的元素。
此方法将事件处理程序添加到元素，而不会覆盖现有的事件处理程序。
我们可以将多个事件处理程序添加到一个元素。
我们可以将多个相同类型的事件处理程序添加到一个元素，例如：两个" click"事件。
事件侦听器不仅可以添加到HTML元素，还可以添加到任何DOM对象。例如：窗口对象。
addEventListener()方法使控制事件如何响应冒泡变得更加容易。
使用addEventListener()方法时，JavaScript与HTML标记分离，以提高可读性，并且即使我们不控制HTML标记，也可以添加事件侦听器。
另外，我们可以使用removeEventListener()方法轻松删除事件侦听器。
语法：
target.addEventListener(type, listener[, options]); target.addEventListener(type, listener[, useCapture]); target.addEventListener(type, listener[, useCapture, wantsUntrusted ]);
参数值
|||
| --- - | --- |
|参数|描述|
| 事件 | 所需。一个字符串，指定事件的名称。 注意：请勿使用“开”前缀。例如，使用“单击”而不是“onclick”。 有关所有HTML DOM事件的列表，请查看我们完整HTML DOM事件对象引用。 |
| 功能 | 所需。指定发生事件时运行的函数。 当事件发生时，事件对象将作为第一个参数传递给函数。事件类型 对象取决于指定的事件。例如，“单击”事件属于MouseEvent对象。 |
| UseCapture | 可选。一个布尔值，指定事件是否应该在捕获或者鼓泡阶段执行。 可能值：true在捕获packefalse~默认中执行事件处理程序。事件处理程序在鼓泡阶段中执行|
现在我们知道了事件侦听器的工作原理，下面让我们看一下JavaScript中的addEventListener()的示例。
JavaScript中的addEventListener()：示例
<!DOCTYPE html>
<html>
<body>
<p>This example uses the addEventListener() method to execute a function when a user clicks on a button.</p>
<button id="myBtn">Try it</button>
<p id="demo">
<script>
document.getElementById("myBtn").addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
</script>
</body>
</html>
