JavaScript - 事件入门
你好啊，未来的JavaScript大师们！今天，我们将踏上一段激动人心的旅程，探索JavaScript事件的世界。作为你友好的计算机老师邻居，我很高兴引导你们了解这个将赋予你的网页生命的核心概念。所以，拿起你最喜欢的饮料，舒服地坐好，让我们一起深入研究！
什么是事件？
想象你在一场派对上（当然是一场编程派对！）。每当有事情发生 - 比如有人到来，一首歌开始播放，或者有人打翻了饮料 - 那就是一个事件。在JavaScript的世界中，事件的工作原理与此类似。它们是网页中发生的事情，JavaScript可以检测并对其做出响应。
事件可以由以下情况触发：
- 用户操作（点击按钮，移动鼠标）
- 浏览器活动（完成页面加载）
- 页面上元素状态的改变
以下是一个简单的例子来阐述这个概念：
<button id="myButton">点击我！</button>
<script>
document.getElementById("myButton").addEventListener("click", function() {
alert("按钮被点击了！");
});
</script>在这个例子中，点击按钮（事件）会导致一个弹窗出现（响应）。就像说，“嘿，JavaScript，当有人点击这个按钮时，显示这条消息！”
JavaScript事件处理器
既然我们了解了什么是事件，那么让我们来谈谈如何处理它们。事件处理器是当事件发生时运行的JavaScript函数。它们就像我们编程派对上的保安，决定每个事件发生时的处理方式。
在JavaScript中，有多种方法可以指定事件处理器。让我们来探索一下：
1. 内联事件处理器
这是处理事件最简单（但并不总是最佳）的方法：
<button onclick="alert('你好，世界！')">点击我</button>在这里，事件处理器直接写在HTML中。当按钮被点击时，它会显示一个警告框。虽然这种方法容易理解，但它通常不适用于大型应用程序，因为它将HTML和JavaScript混合在一起。
2. 属性事件处理器
一种更好的方法是分离你的JavaScript和HTML：
<button id="myButton">点击我</button>
<script>
document.getElementById("myButton").onclick = function() {
alert("来自属性事件处理器的问候！");
};
</script>这种方法将一个函数赋值给按钮元素的onclick属性。它更干净，但它有一个限制：你只能通过这种方式为每个事件分配一个处理器。
3. addEventListener() 方法
这是处理事件最灵活、最强大的方法：
<button id="myButton">点击我</button>
<script>
document.getElementById("myButton").addEventListener("click", function() {
alert("来自addEventListener的问候！");
});
</script>使用addEventListener()，你可以：
- 为单个元素附加多个事件处理器
- 在需要时轻松移除事件处理器
- 在事件生命周期中更好地控制监听器的激活
让我们看一个更复杂的例子：
<button id="myButton">点击我</button>
<script>
let button = document.getElementById("myButton");
function changeColor() {
this.style.backgroundColor = "red";
}
function addBorder() {
this.style.border = "2px solid blue";
}
button.addEventListener("click", changeColor);
button.addEventListener("click", addBorder);
</script>在这个例子中，点击按钮会将它的颜色变为红色并添加一个蓝色边框。一个事件对应两个处理器！
JavaScript事件对象
当事件发生时，JavaScript会创建一个Event对象。这个对象包含了关于事件的详细信息，比如事件发生在哪里，事件的类型，有时还有特定于该事件类型的额外信息。
让我们看一个例子：
<button id="myButton">点击我</button>
<script>
document.getElementById("myButton").addEventListener("click", function(event) {
console.log("事件类型: " + event.type);
console.log("目标元素: " + event.target.tagName);
console.log("鼠标X坐标: " + event.clientX);
console.log("鼠标Y坐标: " + event.clientY);
});
</script>当你点击按钮时，这个脚本会记录关于点击事件的以下信息：
- 事件的类型（"click"）
- 被点击的元素（"BUTTON"元素）
- 点击发生时鼠标的X和Y坐标
这些信息对于创建交互性和响应性的网页应用非常有用。
下面是一个表格总结了Event对象的一些常见属性：
| 属性 | 描述 |
|---|---|
| type | 事件的类型（例如，"click"，"mouseover"） |
| target | 触发事件的元素 |
| clientX, clientY | 鼠标指针的水平和垂直坐标 |
| keyCode | 按下的键的键码（针对键盘事件） |
| preventDefault() | 阻止事件默认行为的方法 |
| stopPropagation() | 阻止事件冒泡到DOM树上的方法 |
记住，不同类型的事件可能有额外的特定属性。总是查看文档以获取每种事件类型的完整属性列表。
总之，事件是交互式网页应用的心脏。它们允许你的JavaScript对用户操作做出响应，并创建动态、引人入胜的体验。随着你继续在JavaScript的道路上前进，你会发现自己越来越多地与事件打交道。接受它们，尝试它们，看着你的网页焕发生命力！
祝编程愉快，未来的JavaScript忍者！??
Credits: Image by storyset