数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 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”事件在用户将鼠标指针移到该元素上时触发。“mouseleave”事件在用户将鼠标指针离开该元素时触发。我们使用事件处理程序更改该元素的背景颜色和文本。
<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”事件上递增。
点击“停止计数”按钮后，计数器停止。
10K+ 浏览量
