如何使用 JavaScript 处理绑定事件?
在本教程中，我们将学习如何使用 JavaScript 处理绑定事件。
事件是浏览器或用户在系统中执行的操作或事件。有各种类型的事件代表浏览器或用户执行的各种活动。例如，如果用户单击按钮，则会触发名为"click"的事件。同样，如果网页加载完成，则会触发名为"load"的事件。
事件监听器是一个持续监听或等待事件发生的程序。它是 JavaScript 最重要的部分之一。事件发生后执行并处理该事件的函数或方法称为事件处理程序。
JavaScript 将事件绑定到各自的事件处理程序以处理事件。方法 addEventListener 就是用于此目的。
使用 addEventListener 将事件与事件处理程序绑定
在 JavaScript 中，addEventListener 方法将特定事件处理程序绑定到特定事件。它通常将事件名称和事件处理程序函数作为参数，并将事件绑定到该事件处理程序
语法
用户可以按照以下语法在 JavaScript 中使用 addEventListener 处理绑定事件。
element.addEventListener(event, eventHandler, useCapture);
在上述语法中，我们将事件和 eventHandler 回调函数作为 addEventListener 方法的参数传递。
参数
event − 它是需要与事件处理程序绑定的事件的名称。
eventHandler − 处理特定事件的函数或方法
useCapture − 它被定义为事件处理程序是在冒泡阶段还是捕获阶段执行。它是可选的，默认情况下为 false，这意味着冒泡阶段。
示例
将点击事件与按钮绑定
在下面的示例中，我们使用 addEventListener 在 JavaScript 中绑定事件。我们正在使用按钮单击事件来更改元素的内部文本。
<html> <body> <h2>Bind an event using <i>addEventListener</i> in JavaScript</h2> <button id = "btn"> Click me</button> <p id = "root"> Welcome to Tutorialspoint!</p> <script> // Event Handler function clickHandler() { document.getElementById('root').innerHTML = 'Button is Clicked!' } let element = document.getElementById('btn') // Binding a click event element.addEventListener('click', clickHandler) </script> </body> </html>
在上面的输出中，用户在单击按钮后可以看到 JavaScript 事件监听器观察到的"click"事件触发器，并且它被称为该事件的指定事件处理程序，在本例中为 clickHandler 函数。然后，clickHandler 函数会更改根 div 的内部文本。
示例
将多个事件与元素绑定
在下面的示例中，我们使用 addEventListener 在 JavaScript 中绑定多个事件。我们在此示例中使用了"click"、"mouseenter"和"mouseleave"事件。每当用户将鼠标指针移到该元素上时，就会触发"mouseenter"事件。每当用户将鼠标指针放在该元素上时，就会触发"mouseeleave"事件。我们使用事件处理程序来更改该元素的背景颜色和文本。
<html> <body> <h2>Bind multiple events using <i>addEventListener</i> in JavaScript</h2> <div id = "element" style = "border: 1px solid black; padding: 10px;"> Welcome to Tutorialspoint! </div> <script> let element = document.getElementById('element') // Event Handlers function clickHandler() { element.innerHTML = 'The element is Clicked!' element.style.backgroundColor = '#ff9797' } function mouseEnterHandler() { element.innerHTML = 'The Mouse pointer is on the element!' element.style.backgroundColor = '#56ea87' } function mouseLeaveHandler() { element.innerHTML = 'The Mouse pointer leaves the element!' element.style.backgroundColor = '#56eade' } // Binding multiple events element.addEventListener('click', clickHandler) element.addEventListener('mouseenter', mouseEnterHandler) element.addEventListener('mouseleave', mouseLeaveHandler) </script> </body> </html>
使用 removeEventListener 从事件中删除事件处理程序
在 JavaScript 中，removeEventListener 用于删除与事件关联的特定事件处理程序。它接受事件和事件处理程序作为参数，该方法会移除它们之间的绑定。
语法
用户可以按照以下语法在 JavaScript 中使用 removeEventListener。
element.removeEventListener(event, eventHandler, useCapture)
参数
event − 它是需要与事件处理程序解除绑定的事件的名称。
eventHandler − 处理特定事件的函数或方法。
useCapture − 它被定义为事件处理程序是在冒泡阶段还是在捕获阶段执行。它是可选的，默认情况下为 false，表示冒泡阶段。
示例
在下面的示例中，我们使用 removeEventListener 从 JavaScript 中的关联事件处理程序中解除事件的绑定。我们通过按钮的"click"事件处理程序解除"mouseenter"事件的事件处理程序与该事件的绑定。"mouseenter"事件处理程序会增加计数器值，通过使用"停止计数器"按钮，我们可以停止计数器的递增。
<html> <body> <h2>Unbinding an event from the associated event handler using <i>removeEventListener</i> in JavaScript</h2> <button id = "btn"> Stop Counter</button> <div id = "element" style = "border: 1px solid black; padding: 10px;"> Counter: 0 </div> <script> let element = document.getElementById('element') let button = document.getElementById('btn') let count = 0 // Event Handlers function mouseEnterHandler(){ count += 1 element.innerHTML = "Counter: " + count } function clickHandler(){ // unbinding mouseenter event element.removeEventListener('mouseenter', mouseEnterHandler) } // Binding events button.addEventListener('click', clickHandler) element.addEventListener('mouseenter', mouseEnterHandler) </script> </body> </html>
在"停止计数器"按钮之前，点击计数器在"mouseenter"事件上递增。
单击"停止计数器"按钮后，计数器停止
