什么是事件？
在JavaScript中，事件是网页中发生的”事情”，比如用户点击按钮、提交表单、页面加载完成等。JavaScript可以”监听”这些事件，并在事件发生时执行相应的代码。
常见的事件类型
鼠标事件
click - 当用户点击元素时触发dblclick - 当用户双击元素时触发mousedown - 当用户在元素上按下鼠标按钮时触发mouseup - 当用户在元素上释放鼠标按钮时触发mousemove - 当用户在元素上移动鼠标时触发mouseover - 当鼠标移入元素时触发mouseout - 当鼠标移出元素时触发
键盘事件
keydown - 当用户按下键盘按键时触发keyup - 当用户释放键盘按键时触发keypress - 当用户按下并释放键盘按键时触发
表单事件
submit - 当表单提交时触发change - 当表单元素的值改变时触发focus - 当元素获得焦点时触发blur - 当元素失去焦点时触发
窗口事件
load - 当页面加载完成时触发resize - 当窗口大小改变时触发scroll - 当用户滚动页面时触发
事件监听的三种方式
1. HTML属性（不推荐）
1
| <button onclick="alert('按钮被点击了!')">点击我</button>
|
2. DOM属性
1
2
3
| document.getElementById("myButton").onclick = function() {
alert("按钮被点击了!");
};
|
3. addEventListener方法（推荐）
1
2
3
| document.getElementById("myButton").addEventListener("click", function() {
alert("按钮被点击了!");
});
|
事件对象
当事件触发时，浏览器会创建一个事件对象，并将其作为参数传递给事件处理函数。这个对象包含了与事件相关的信息。
1
2
3
4
5
| document.getElementById("myButton").addEventListener("click", function(event) {
console.log("事件类型：" + event.type);
console.log("目标元素：" + event.target);
console.log("鼠标坐标：" + event.clientX + ", " + event.clientY);
});
|
事件冒泡与捕获
当一个事件发生在一个元素上，它会首先在该元素上运行处理程序，然后在其父元素上运行，接着在其他祖先上运行。这个过程称为”事件冒泡”。
1
2
3
4
|
element.addEventListener("click", function(event) {
event.stopPropagation();
});
|
相反，事件捕获是从最外层的祖先元素开始，然后向下传播到触发事件的元素。
1
2
3
4
|
element.addEventListener("click", function() {
alert("捕获阶段的处理程序");
}, true);
|
事件委托
事件委托是一种利用事件冒泡的技术，它允许我们将事件监听器添加到一个父元素，而不是每个子元素单独添加。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
let buttons = document.getElementsByTagName("button");
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", function() {
alert("按钮 " + i + " 被点击了!");
});
}
document.getElementById("buttonContainer").addEventListener("click", function(event) {
if (event.target.tagName === "BUTTON") {
alert("按钮 " + event.target.id + " 被点击了!");
}
});
|
实际应用示例
表单验证
1
2
3
4
5
6
7
| document.getElementById("myForm").addEventListener("submit", function(event) {
let username = document.getElementById("username").value;
if (username.length < 3) {
alert("用户名至少需要3个字符!");
event.preventDefault();
}
});
|
图片轮播
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| let currentSlide = 0;
const slides = document.getElementsByClassName("slide");
function showSlide(n) {
for (let i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[n].style.display = "block";
}
document.getElementById("nextButton").addEventListener("click", function() {
currentSlide = (currentSlide + 1) % slides.length;
showSlide(currentSlide);
});
document.getElementById("prevButton").addEventListener("click", function() {
currentSlide = (currentSlide - 1 + slides.length) % slides.length;
showSlide(currentSlide);
});
showSlide(currentSlide);
|
总结
JavaScript事件是实现网页交互的基础。通过合理使用事件监听、事件对象、事件冒泡与捕获以及事件委托等技术，我们可以创建出响应用户操作的动态网页。在实际开发中，推荐使用addEventListener方法来添加事件监听器，这样可以为同一事件添加多个处理程序，并且更容易移除。
微信
