js之事件冒泡和事件捕获详细介绍

下面我将给出关于"js之事件冒泡和事件捕获详细介绍"的完整攻略。

什么是事件冒泡和事件捕获

在JavaScript中，事件处理程序可以直接绑定在DOM元素上。当事件被触发时，事件会从目标元素开始向外传播，这就是事件的冒泡和捕获。

事件冒泡是指事件从子元素传递到父元素，直到传递到最外层的元素（也就是window对象）。例如，当单击一个button元素时，单击事件会先传递到button元素，然后传递到button元素的父元素，以此类推，直到传递到document对象和window对象。

事件捕获则与事件冒泡正好相反，是从最外层的元素开始，一直向内传递到目标元素。

如何使用事件冒泡和事件捕获

在绑定事件处理程序时，可以选择绑定在事件流的捕获或冒泡阶段。例如：

// 在冒泡阶段绑定事件处理程序
document.getElementById('myButton').addEventListener('click', function(){
    // 事件处理程序
});

// 在捕获阶段绑定事件处理程序
document.getElementById('myButton').addEventListener('click', function(){
    // 事件处理程序
}, true);

在上面的代码中，第一个addEventListener（）方法绑定的事件处理程序是在冒泡阶段处理的，即在单击myButton按钮后执行。第二个addEventListener（）方法绑定的事件处理程序是在捕获阶段处理的，即在单击之前执行。

实际上，事件流包括三个阶段：事件捕获阶段、目标节点阶段和事件冒泡阶段。可以通过addEventListener（）方法的第三个参数来指定处理程序在哪个阶段执行，false表示在冒泡阶段执行，true表示在捕获阶段执行。

值得注意的是，事件处理程序默认会在冒泡阶段执行，所以不需要显式地指定参数为false。如果您要在捕获阶段执行事件处理程序，则需要将参数设置为true。

事件传播的示例说明

下面两个示例说明了如何使用事件冒泡和事件捕获：

示例1：事件冒泡

HTML代码：

<div id="outer">
  <div id="middle">
    <div id="inner">
      Click me!
    </div>
  </div>
</div>

JavaScript代码：

var outer = document.getElementById('outer');
var middle = document.getElementById('middle');
var inner = document.getElementById('inner');

outer.addEventListener('click', function(){
    console.log('outer');
});

middle.addEventListener('click', function(){
    console.log('middle');
});

inner.addEventListener('click', function(){
    console.log('inner');
});

在上述示例中，当我们在点击inner元素的时候，事件会从inner元素开始向外冒泡，依次触发middle和outer的click事件，控制台输出结果为：

inner
middle
outer

示例2：事件捕获

HTML代码：

<div id="outer">
  <div id="middle">
    <div id="inner">
      Click me!
    </div>
  </div>
</div>

JavaScript代码：

var outer = document.getElementById('outer');
var middle = document.getElementById('middle');
var inner = document.getElementById('inner');

outer.addEventListener('click', function(){
    console.log('outer');
}, true);

middle.addEventListener('click', function(){
    console.log('middle');
}, true);

inner.addEventListener('click', function(){
    console.log('inner');
}, true);

在上述示例中，当我们在点击inner元素的时候，事件会从最外层元素开始向内捕获，依次触发outer和middle的click事件，控制台输出结果为：

outer
middle
inner

通过上述示例，我们可以看到事件在DOM结构中向外传递的方式，以及如何使用事件冒泡和事件捕获处理事件。