正文

JavaScript中控制事件先冒泡后捕获

/0 浏览量
0718

在JavaScript中，事件流描述了从页面中接收事件的顺序。事件流主要有两种类型：冒泡和捕获。冒泡是事件从最深的节点开始，然后逐级向上传播到较为顶部的节点；而捕获则是从最顶层的节点开始，然后逐级向下传播到最深的节点。

事件冒泡

事件冒泡是浏览器默认的事件流行为。例如，当你在页面上点击一个按钮时，事件会从按钮开始，然后依次向上传播到它的父元素、祖父元素，直到到达document对象。

事件捕获

事件捕获与事件冒泡相反，它是从document对象开始，然后逐级向下传播到目标元素。

控制事件流

在默认情况下，事件会先经历捕获阶段，然后是目标阶段，最后是冒泡阶段。但是，你可以通过以下方式来控制事件流：

1. 使用addEventListener的第三个参数

addEventListener方法允许你指定一个布尔值来控制事件流：

  • false：默认值，表示先冒泡后捕获。
  • true：表示先捕获后冒泡。
element.addEventListener('click', function(event) {
  // 这里的事件流是先捕获后冒泡
}, true);

2. 使用事件对象的stopPropagation方法

stopPropagation方法可以阻止事件冒泡到父元素。

element.addEventListener('click', function(event) {
  event.stopPropagation();
}, false);

3. 使用事件对象的preventDefault方法

preventDefault方法可以阻止事件的默认行为，例如在链接上点击会阻止页面跳转。

element.addEventListener('click', function(event) {
  event.preventDefault();
}, false);

示例

以下是一个简单的示例，展示了如何使用addEventListener的第三个参数来控制事件流：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件流示例</title>
<style>
  #parent {
    width: 200px;
    height: 200px;
    background-color: lightblue;
  }
  #child {
    width: 100px;
    height: 100px;
    background-color: lightcoral;
  }
</style>
</head>
<body>
<div id="parent">
  <div id="child"></div>
</div>

<script>
  var parent = document.getElementById('parent');
  var child = document.getElementById('child');

  parent.addEventListener('click', function(event) {
    console.log('Parent: 捕获');
  }, true);

  child.addEventListener('click', function(event) {
    console.log('Child: 捕获');
    event.stopPropagation();
  }, true);

  parent.addEventListener('click', function(event) {
    console.log('Parent: 冒泡');
  }, false);

  child.addEventListener('click', function(event) {
    console.log('Child: 冒泡');
  }, false);
</script>
</body>
</html>

在这个示例中，点击child元素时，控制台会依次输出：

Child: 捕获
Parent: 捕获
Child: 冒泡
Parent: 冒泡

这展示了事件是如何先经历捕获阶段，然后是冒泡阶段的。

-- 展开阅读全文 --