JS事件对象|极客笔记

JS事件对象

在JavaScript中，事件对象是与事件相关联的对象，它包含了与事件有关的信息和属性。通过事件对象，我们可以获取触发事件的元素、事件类型、鼠标位置等信息，对事件进行操作和处理。

事件对象的获取

在处理事件的过程中，事件对象会自动被传递给事件处理函数。我们可以通过事件处理函数的参数来获取事件对象。通常，事件对象作为参数传递给事件处理函数的第一个参数，一般命名为event或者e。

下面是一个简单的示例代码，演示如何获取事件对象：

<!DOCTYPE html>
<html>
<head>
  <title>获取事件对象示例</title>
</head>
<body>
  <button id="btn">点击我</button>
  <script>
    // 获取元素
    var btn = document.getElementById('btn');

    // 添加点击事件监听
    btn.addEventListener('click', function(event) {
      // 输出事件对象
      console.log(event);
    });
  </script>
</body>
</html>

当点击按钮时，控制台会输出事件对象的信息。事件对象中包含了很多属性和方法，可以通过事件对象来获取鼠标位置、键盘按键等信息。

常用属性和方法

常用属性

type：事件类型，比如click、mouseover、keydown等。
target：触发事件的元素。
currentTarget：绑定事件监听的元素。
clientX、clientY：鼠标相对于浏览器窗口的水平和垂直坐标。
keyCode：触发键盘事件时，表示被按下的键的键码。
preventDefault()：阻止事件的默认行为。
stopPropagation()：阻止事件冒泡。

示例代码

下面是一个示例代码，演示如何使用事件对象的属性和方法：

<!DOCTYPE html>
<html>
<head>
  <title>事件对象属性和方法示例</title>
</head>
<body>
  <button id="btn">点击我</button>
  <script>
    // 获取元素
    var btn = document.getElementById('btn');

    // 添加点击事件监听
    btn.addEventListener('click', function(event) {
      // 输出事件类型
      console.log(event.type);

      // 输出触发事件的元素
      console.log(event.target);

      // 输出鼠标位置
      console.log(event.clientX, event.clientY);

      // 阻止事件的默认行为
      event.preventDefault();
    });
  </script>
</body>
</html>

当点击按钮时，控制台会输出事件的类型、触发事件的元素、鼠标位置，并且会阻止事件的默认行为。

事件传播

在HTML文档中，事件并不是只在触发事件的元素上发生，而是会在整个DOM树上进行传播。事件传播分为两种方式：捕获阶段和冒泡阶段。

捕获阶段：事件从最外层的元素开始传播，逐级向内，直到达到目标元素。
冒泡阶段：事件从目标元素开始传播，逐级向外，直到达到最外层的元素。

我们可以通过事件对象的stopPropagation()方法来阻止事件的传播。

示例代码

下面是一个示例代码，演示事件传播的过程：

<!DOCTYPE html>
<html>
<head>
  <title>事件传播示例</title>
</head>
<body>
  <div id="parent">
    <button id="btn">点击我</button>
  </div>
  <script>
    // 获取元素
    var parent = document.getElementById('parent');
    var btn = document.getElementById('btn');

    // 添加点击事件监听
    parent.addEventListener('click', function(event) {
      console.log('父元素捕获阶段');
    }, true);

    btn.addEventListener('click', function(event) {
      console.log('按钮捕获阶段');
    }, true);

    btn.addEventListener('click', function(event) {
      console.log('按钮冒泡阶段');
    });

    parent.addEventListener('click', function(event) {
      console.log('父元素冒泡阶段');
    });
  </script>
</body>
</html>

当点击按钮时，控制台会按照捕获阶段和冒泡阶段的顺序输出信息。