本文共 2750 字，大约阅读时间需要 9 分钟。

W3C 规范中定义了3个事件阶段，依次是捕获阶段 、 目标阶段 、 冒泡阶段。先捕获，后冒泡，捕获从上到下，就像石沉大海；而冒泡从下到上就像气泡冒出水面。

先看个示例：

html 页面：

    
       
   
        
         
              
美杉
              
禄铭
         
         
              
彦芸
              
阳骞
         
        
   

js ：

/* * 冒泡与捕获 * @author Deniro Lee */let html = document.documentElement;let body = document.body;let table = body.querySelector('table');let tbody = body.querySelector('tbody');let secondTr = body.querySelector('#secondTr');let firstTd = body.querySelector('#firstTd');/** * 冒泡回调 * @param event */function bubbleCallback(event) {    let target = event.currentTarget;    console.log('bubble -> ' + target.tagName);}/** * 捕获回调 * @param event */function captureCallback(event) {    let target = event.currentTarget;    console.log('capture -> ' + target.tagName);}html.addEventListener('click', captureCallback, true);body.addEventListener('click', captureCallback, true);table.addEventListener('click', captureCallback, true);tbody.addEventListener('click', captureCallback, true);secondTr.addEventListener('click', captureCallback, true);firstTd.addEventListener('click', captureCallback, true);html.addEventListener('click', bubbleCallback, false);body.addEventListener('click', bubbleCallback, false);table.addEventListener('click', bubbleCallback, false);tbody.addEventListener('click', bubbleCallback, false);secondTr.addEventListener('click', bubbleCallback, false);firstTd.addEventListener('click', bubbleCallback, false);

在浏览器中运行以上页面，点击“彦芸”后，在 Console 中会看到冒泡与捕获的过程运行结果：

点击事件对象会按照图 1 的传播路径依次完成捕获、目标与冒泡阶段。如果某个阶段不支持或事件对象的传播被终止，那么该阶段就会被跳过。

代码中使用了addEventListener() 方法来跟踪捕获与冒泡阶段事件。该方法的语法为：

element.addEventListener(event, function, useCapture)

之前定义的脚本，我们使用 addEventListener() 方法先绑定捕获方法，后绑定冒泡方法；如果我们交换下顺序，先绑定冒泡然后再捕获会怎样？

html.addEventListener('click', bubbleCallback, false);body.addEventListener('click', bubbleCallback, false);table.addEventListener('click', bubbleCallback, false);tbody.addEventListener('click', bubbleCallback, false);secondTr.addEventListener('click', bubbleCallback, false);firstTd.addEventListener('click', bubbleCallback, false);html.addEventListener('click', captureCallback, true);body.addEventListener('click', captureCallback, true);table.addEventListener('click', captureCallback, true);tbody.addEventListener('click', captureCallback, true);secondTr.addEventListener('click', captureCallback, true);firstTd.addEventListener('click', captureCallback, true);

运行结果：

可以发现目标元素的冒泡事件先于捕获事件执行，其它元素顺序不变。也就是说，绑定顺序只影响到目标元素的事件发生顺序。

转载地址：https://deniro.blog.csdn.net/article/details/106456740 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！