浅析 JavaScript 中的 Event 事件

什么是 Event 事件？

事件是 JavaScript 中一种重要的交互方式。页面的许多行为（如点击、滚动、拖拽、键盘按下等）都可以通过事件来触发相应的 JavaScript 代码。

JavaScript 中的 Event 对象表示事件，它包含了导致该事件发生的行为以及相关的信息。Event 对象是由浏览器自动创建的，我们可以通过监听事件来获取该对象。

常用的 Event 事件

以下是一些常用的 Event 事件：

• click：鼠标单击事件。
• mouseover：鼠标移入事件。
• keydown：键盘按键按下事件。
• scroll：页面滚动事件。

Event 事件监听

通过 addEventListener 方法可以监听 Event 事件，该方法通常调用在 DOM 元素上。

document.addEventListener('click', function(event) {
  console.log('鼠标点击事件');
});

上述代码将在文档中任意位置接收到鼠标单击事件时输出 鼠标点击事件。

Event 事件处理

阻止默认行为

有些事件在触发时会有默认行为，如 <a> 标签的点击会跳转网页，这时我们可以通过 Event 对象的 preventDefault 方法 来阻止该行为的发生。

document.querySelector('a').addEventListener('click', function(event) {
  event.preventDefault();
});

上述代码将在 <a> 标签被点击时不跳转，而是停留在本页面。

阻止事件冒泡

事件冒泡是指事件从最底层开始向着最外层的父元素冒泡。有时我们希望阻止事件冒泡，即在当前元素内部处理完事件后不再向外传递。

<div class="outer">
  <div class="inner">
    <button>点击</button>
  </div>
</div>

document.querySelector('.outer').addEventListener('click', function(event) {
  console.log('outer 被点击了');
});
document.querySelector('.inner').addEventListener('click', function(event) {
  console.log('inner 被点击了');
  event.stopPropagation();
});
document.querySelector('button').addEventListener('click', function(event) {
  console.log('button 被点击了');
});

上述代码在点击按钮时，会先触发 inner 元素的点击事件，再停止事件冒泡，因此不会触发 outer 元素的点击事件。最终只输出 inner 被点击了 和 button 被点击了。

示例说明

示例一：鼠标悬浮事件

<p id="text">鼠标悬浮在我身上</p>

document.querySelector('#text').addEventListener('mouseover', function(event) {
  event.target.innerText = '谢谢你的关注';
});

上述代码在鼠标悬浮在 <p> 标签上时，将该元素的文字内容修改为 谢谢你的关注。

示例二：键盘快捷键

document.addEventListener('keydown', function(event) {
  if (event.key === 'Enter') {
    console.log('你按下了 Enter 键');
  }
});

上述代码在按下 Enter 键时输出 你按下了 Enter 键。这样的效果既可以应用在网页的搜索框上，也可以用在游戏的方向键上。