5.1 事件处理基础
JavaScript中的事件让我们可以与用户互动，对他们的操作作出反应，比如鼠标点击、按键、表单变化等等。理解如何添加和移除事件处理器是开发交互式Web应用的重要部分。
什么是事件？
事件就是浏览器发出的信号，提示有事情发生了。比如用户点击了按钮或页面加载完成。事件允许我们对这些信号作出特定的操作。
事件类型
事件类型有很多。常用的包括：
- 鼠标:
click,dblclick,mouseover,mouseout,mousedown,mouseup,mousemove - 键盘:
keydown,keyup,keypress - 表单:
submit,change,focus,blur - 文档/窗口:
load,resize,scroll,unload
事件处理器
事件处理器（或事件监听器）是对特定事件作出反应的函数。它们“监听”特定的事件在发生时被触发。
5.2 添加事件处理器
使用addEventListener添加事件处理器
addEventListener方法允许我们向元素添加事件处理器。与通过HTML属性（如onclick, onchange等）添加事件的方法相比，它提供了更大的灵活性和控制。
语法：
element.addEventListener(event, handler, options);
其中:
element: 添加事件处理器的元素event: 希望响应的事件类型（比如'click', 'input', 'keydown'）handler: 事件发生时调用的函数options: 额外的参数（可选）
示例：添加click事件处理器
在这个例子中，事件处理器被添加到按钮上。当用户点击按钮时，会弹出一个通知消息。
HTML
<!DOCTYPE html>
<html>
<head>
<title>Event Example</title>
</head>
<body>
<button id="myButton">点击我</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('按钮被点击了!');
});
</script>
</body>
</html>
示例：添加多个事件处理器
使用addEventListener可以为同一事件添加多个处理器。
在这个例子中，两个事件处理器被添加到按钮上。点击时，两个处理器会依次执行，并在控制台输出相应的信息。
HTML
<!DOCTYPE html>
<html>
<head>
<title>Event Example</title>
</head>
<body>
<button id="myButton">点击我</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
console.log('第一个处理器');
});
button.addEventListener('click', function() {
console.log('第二个处理器');
});
</script>
</body>
</html>
5.3 使用options参数
options参数允许我们配置事件处理器的行为。常用的选项有：
once: 如果true，处理器只会被调用一次，之后会自动移除capture: 如果true，事件在捕获阶段被处理，而不是冒泡阶段passive: 如果true，表示处理器不会调用preventDefault()
示例：只执行一次的处理器
在这个例子中，事件处理器只会被触发一次，然后会自动被移除。
HTML
<!DOCTYPE html>
<html>
<head>
<title>Event Example</title>
</head>
<body>
<button id="myButton">点击我</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('这只会显示一次');
}, { once: true });
</script>
</body>
</html>
5.4 移除事件处理器
使用removeEventListener移除事件处理器
removeEventListener方法允许我们移除通过addEventListener添加的事件处理器。为了成功移除，我们需要传递与添加时相同的参数。
语法：
element.removeEventListener(event, handler, options)
其中:
element: 移除事件处理器的元素event: 要移除的事件类型handler: 被指定为事件处理器的函数options: 额外的参数（需与添加时使用的参数一致）
示例：移除click事件处理器
在这个例子中，click事件的处理器被添加到按钮上。按下另一按钮会移除click事件的处理器。
HTML
<!DOCTYPE html>
<html>
<head>
<title>Event Example</title>
</head>
<body>
<button id="myButton">点击我</button>
<button id="removeButton">移除点击处理器</button>
<script>
const button = document.getElementById('myButton');
const removeButton = document.getElementById('removeButton');
function clickHandler() {
alert('按钮被点击了!');
}
button.addEventListener('click', clickHandler);
removeButton.addEventListener('click', function() {
button.removeEventListener('click', clickHandler);
alert('点击处理器已移除');
});
</script>
</body>
</html>
GO TO FULL VERSION