JavaScript 事件监听器 addEventListener() 方法的基本用法
addEventListener() 方法是 JavaScript 中用于设置事件监听器的常用方法。它可以让程序在特定的事件发生时执行某些代码。以下是 addEventListener() 方法的基本用法：
语法
element.addEventListener(event, function, useCapture);
参数
- element: 要绑定事件监听器的 DOM 元素。
- event: 表示要监听的事件类型，例如
"click"、"mouseover"、"keydown"等。 - function: 事件触发时要执行的函数。可以是命名函数，匿名函数，也可以是箭头函数。
- useCapture（可选）: 一个布尔值，决定事件是在捕获阶段还是冒泡阶段触发。默认为
false（即在冒泡阶段触发）。
基本示例
以下是一个简单的例子，如何使用 addEventListener() 方法来监听按钮的点击事件：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>EventListener Example</title></head><body><button id="myButton">Click Me!</button><script>// 获取按钮元素const button = document.getElementById('myButton');// 为按钮添加点击事件监听器button.addEventListener('click', function() {alert('Button was clicked!');});</script></body></html>
使用命名函数
你也可以将事件处理函数定义为命名函数，从而更易于管理和重用：
function handleClick() {alert('Button was clicked!');}// 绑定事件监听器button.addEventListener('click', handleClick);
事件对象
事件处理函数可以接收一个事件对象作为参数，提供有关事件的更多信息：
button.addEventListener('click', function(event) {console.log('Button was clicked at position:', event.clientX, event.clientY);});
一次性事件监听器
如果希望事件监听器只触发一次，可以使用 { once: true } 参数：
button.addEventListener('click', function() {alert('This alert will only appear once');}, { once: true });
addEventListener() 是一个非常强大的工具，它允许开发者轻松且灵活地处理用户交互和其他事件。