一起深入理解JS中的事件对象

在客户端JS中，事件对象是非常重要的概念之一，它提供了关于事件被触发的所有信息。了解并使用事件对象可以让我们写出更加优秀的JS代码，并更好的理解浏览器的事件模型。

何为事件对象

事件对象是指在JavaScript中当一个事件被触发时，浏览器会自动创建一个事件对象。事件对象中包含着与所触发事件相关的所有信息，如事件发生的位置、事件类型、鼠标按键、键盘按键、滚动数据等等。

当事件处理程序被调用时，事件对象会自动作为第一个参数传递给事件处理程序。

事件对象的属性

事件对象中包含的信息非常丰富，下面是一些比较常用的属性。

通用属性

• type：表示触发事件的类型。
• target：表示事件的目标元素。
• currentTarget：表示事件绑定的当前元素。
• eventPhase：表示事件处理的阶段，常用的值有0（捕获）、1（处于目标）和2（冒泡）。
• timeStamp：表示事件被创建的时间戳。

鼠标事件的属性

• clientX、clientY：表示事件发生时鼠标指针的位置，以浏览器窗口的左上角为参考点。
• screenX、screenY：表示事件发生时鼠标指针的位置，以屏幕的左上角为参考点。
• button：表示鼠标按键的类型，比如左键（0）、中键（1）和右键（2）等等。
• altKey、ctrlKey、shiftKey：表示是否按下了键盘上的Alt、Ctrl和Shift键。

键盘事件的属性

• keyCode：表示按下的键盘按键的字符编码。
• altKey、ctrlKey、shiftKey：表示是否按下了键盘上的Alt、Ctrl和Shift键。

事件对象的方法

事件对象不仅包含信息，还提供了一些方法，用来操作浏览器的默认行为和事件的冒泡。

阻止默认行为

使用preventDefault方法可以取消浏览器对事件的默认行为，比如阻止链接的跳转、表单的提交等等。

document.querySelector('a').addEventListener('click', function(event) {
  event.preventDefault(); // 阻止链接跳转
});

阻止事件冒泡

使用stopPropagation方法可以防止事件进一步传播到更上层的元素。

document.querySelector('a').addEventListener('click', function(event) {
  event.stopPropagation(); // 阻止冒泡到更上层的元素
});

示例

下面通过两个示例，展示如何使用事件对象。

示例一

在一个按钮上添加点击事件，当用户点击按钮时，获取按钮坐标并打印出来。

<button id="myButton">点击我</button>

const button = document.querySelector('#myButton');
button.addEventListener('click', function(event) {
  const x = event.clientX;
  const y = event.clientY;
  console.log(`x: ${x}, y: ${y}`);
});

示例二

在一个列表中的每一项上添加点击事件，当用户点击某一项时，高亮该项并同时取消其他项的高亮效果。

<ul id="myList">
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ul>

const list = document.querySelector('#myList');
const items = list.querySelectorAll('li');
items.forEach((item) => {
  item.addEventListener('click', function(event) {
    items.forEach((i) => i.classList.remove('highlight'));
    event.currentTarget.classList.add('highlight');
  });
});

结语

事件对象是前端开发不可或缺的知识点之一，了解其属性和方法，可以帮助我们更好的操作DOM，提升用户交互体验。