深入解析JS中的事件对象Event-猿码集

1. 概述

事件是JavaScript中非常重要的一个概念，包括页面加载、按钮点击、表单提交等等操作都是通过事件来触发。事件对象Event代表着每一个事件的发生，它提供了丰富的属性和方法，用来获取事件的各种信息。

2. Event对象的常用属性

2.1 type

type属性返回当前事件的类型，比如click、keyup等。下面的代码展示了如何获取事件的类型：


document.getElementById('test').addEventListener('click', function(event) {
  console.log(event.type); // 输出click
});

2.2 target

target属性返回触发事件的DOM元素，即事件的目标元素。下面的代码展示了如何获取目标元素：


document.getElementById('test').addEventListener('click', function(event) {
  console.log(event.target); // 输出当前被点击的元素
});

2.3 currentTarget

currentTarget属性返回当前捕获或冒泡的元素。它与target属性类似，但是它指向的是添加事件处理程序的元素。


document.getElementById('test').addEventListener('click', function(event) {
  console.log(event.currentTarget); // 输出当前这个元素
});

2.4 preventDefault()

preventDefault()方法可以阻止浏览器默认行为，比如超链接的点击跳转、表单的提交等。调用此方法后，浏览器将不再执行默认的操作。


document.getElementById('test').addEventListener('click', function(event) {
  event.preventDefault(); // 阻止默认行为
});

2.5 stopPropagation()

stopPropagation()方法用于停止事件的传播，即阻止事件在DOM树上的冒泡或捕获。调用此方法后，事件将不再向上冒泡或向下传递。


document.getElementById('test').addEventListener('click', function(event) {
  event.stopPropagation(); // 阻止事件传播
});

3. Event对象的常用方法

3.1 preventDefault()

在上一节中已经介绍了preventDefault()方法的作用，它既是Event对象的一个属性也是一个方法。在某些情况下，我们需要在事件触发后才能阻止默认行为，这时需要使用事件对象的defaultPrevented属性。

defaultPrevented属性返回一个boolean值，表示事件的默认行为是否已经被阻止。下面的代码展示了如何阻止超链接的默认行为：


document.getElementById('link').addEventListener('click', function(event) {
  // 阻止超链接的默认行为
  event.preventDefault();
  // 输出true
  console.log(event.defaultPrevented);
});

3.2 stopPropagation()

在上一节中已经介绍了stopPropagation()方法的作用，它可以阻止事件向上冒泡或向下传递。在一些特定的场景中，我们需要获取当前正在执行的事件处理程序运行的阶段，这时可以使用eventPhase属性。

eventPhase属性返回一个整数值，表示事件的执行阶段。它有三个可能的值：

1：捕获阶段

2：目标阶段

3：冒泡阶段

下面的代码展示了如何获取事件的执行阶段：


document.getElementById('test').addEventListener('click', function(event) {
  console.log(event.eventPhase); // 输出当前阶段
  // 阻止事件向上冒泡
  event.stopPropagation();
});

4. Event对象的应用

在实际开发中，我们经常会使用Event对象来执行一些复杂的操作。下面的代码演示了如何通过监听键盘事件执行对应的操作：


// 绑定键盘事件
document.addEventListener('keydown', function(event) {
  // 点击空格键
  if (event.keyCode === 32) {
    // 获取当前正在播放的音频
    var audio = document.querySelector('audio[playing]');
    // 如果找到了音频
    if (audio) {
      // 暂停音频
      audio.pause();
      audio.removeAttribute('playing');
    } else {
      // 否则播放音频
      var audio = document.querySelector('audio');
      audio.play();
      audio.setAttribute('playing', true);
    }
  }
});

以上代码中，我们监听了keydown事件，当按下空格键时，会执行对应的操作。具体来说，它会获取当前正在播放的音频，并暂停它；如果没有正在播放的音频，则播放第一个音频。

5. 小结

本篇文章主要介绍了JavaScript中事件对象Event的常用属性和方法，以及它的应用场景。通过学习本文，您可以更全面地了解和应用Event对象，使您的JavaScript编程更加高效和灵活。

深入解析JS中的事件对象Event