理解JavaScript事件对象

2023年5月27日上午4:15 • JavaScript

理解JavaScript事件对象在事件处理中是非常重要的。在JavaScript中，事件对象（Event Object）是事件处理函数中的第一个参数。当特定事件被触发时，浏览器会自动创建事件对象(Event Object)。开发者可以使用该对象在事件处理函数中访问事件的详细信息，例如鼠标位置，按键，以及事件类型等。

JavaScript事件对象的属性

事件对象包含很多的属性，下面介绍一些常用的属性：

1. target属性

event.target 属性保存了发生事件的元素。例如，当用户单击某个元素时，event.target属性会将该元素传递给事件处理函数。

例如：

<button onclick="console.log(event.target)">点击我</button>

点击按钮后，控制台会输出：

<button>点击我</button>

2. type属性

event.type 属性保存了触发事件的类型。例如，当用户触发 click 事件时，event.type 将返回 click。

例如：

<button onclick="console.log(event.type)">点击我</button>

点击按钮后，控制台会输出：

click

3. preventDefault()方法

preventDefault() 方法可以取消事件默认的行为，例如，当用户点击一个链接时，浏览器会默认打开该链接。通过调用event.preventDefault()方法可以取消默认行为。

例如：

<a href="http://example.com" onclick="event.preventDefault()">点击我不跳转</a>

点击链接时，由于调用event.preventDefault()方法，浏览器不会打开链接。相反，只是执行预定的JavaScript代码。

4. stopPropagation()方法

stopPropagation() 方法可以防止事件冒泡到其他元素。冒泡是指，当发生在元素中的事件被处理后，上级元素的同样事件也会被触发。

例如：

<div onclick="console.log('div 点击事件触发')">
  <button onclick="console.log('button 点击事件触发'); event.stopPropagation()">点击我</button>
</div>

当点击按钮时，只会输出 button 点击事件触发，而 div 的点击事件不会被触发。

示例代码

下面是一个简单的例子说明事件对象的使用。

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript事件对象示例</title>
</head>
<body>
  <div id="container">
    <button>点击我</button>
  </div>
  <script>
    const container = document.querySelector('#container');
    container.addEventListener('click', event => {
      console.log('类型:', event.type);
      console.log('发生元素:', event.target);
      event.preventDefault();
    });
  </script>
</body>
</html>

当用户点击按钮时，事件处理函数被触发。控制台会输出有关事件的信息，同时由于调用了preventDefault()方法，浏览器不会跳转到其他页面。

另外一个例子，我们可以用冒泡事件来理解阻止默认事件的同时阻止事件向父级元素传递。

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript StopPropagation() 方法示例</title>
</head>
<body>
  <div style="background-color: yellow;height: 200px;width: 400px;" onclick="console.log('div 点击事件触发')">
    <button onclick="console.log('button 点击事件触发');event.stopPropagation()">点击我</button>
  </div>
</body>
</html>

当我们运行上述代码时，点击按钮时不会触发 div 的点击事件输出，因为已经调用了 event.stopPropagation() 方法。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：理解JavaScript事件对象 - Python技术站