浏览器事件模型中捕获阶段、目标阶段、冒泡阶段实例详解

标签： javascript 事件 事件监听 事件绑定 | 发表时间：2015-08-23 17:37 | 作者：本期节目
出处：http://segmentfault.com/blogs

如果对事件大概了解，可能知道有事件冒泡这回事，但是冒泡、捕获、传播这些机制可能还没有深入的研究实践一下，我抽时间整理了一下相关的知识。

  • 本文主要对事件机制一些细节进行讨论，过于基础的事件绑定知识方法没有介绍。

  • 特别少的篇幅关注浏览器兼容问题，毕竟原理了解了，兼容性问题可以自己想办法解决了。

在浏览器相对标准化之前，各个浏览器厂商都是自己实现的事件模型，有的用了冒泡，有的用了捕获，W3C为了兼顾之前的标准，将事件发生定义成如下三个阶段：

1、捕获阶段
2、目标阶段
3、冒泡阶段

只是硬生生的说事件机制到底是怎么回事不容易理解，用一个demo为主线说明事件的原理比较容易理解：

HTML

  <body>
    <div id="wrapDiv">wrapDiv
        <p id="innerP">innerP
            <span id="textSpan">textSpan</span>
        </p>
    </div>
</body>

CSS

  <style>
    #wrapDiv, #innerP, #textSpan{
        margin: 5px;
        padding: 5px;
        box-sizing: border-box;
        cursor: default;
    }
    #wrapDiv{
        width: 300px;
        height: 300px;
        border: indianred 3px solid;
    }
    #innerP{
        width: 200px;
        height: 200px;
        border: hotpink 3px solid;
    }
    #textSpan{
        display: block;
        width: 100px;
        height: 100px;
        border: orange 3px solid;
    }
</style>

JavaScript

  <script>
    var wrapDiv = document.getElementById("wrapDiv");
    var innerP = document.getElementById("innerP");
    var textSpan = document.getElementById("textSpan");

    // 捕获阶段绑定事件
    window.addEventListener("click", function(e){
        console.log("window 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    document.addEventListener("click", function(e){
        console.log("document 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    document.documentElement.addEventListener("click", function(e){
        console.log("documentElement 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    document.body.addEventListener("click", function(e){
        console.log("body 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    wrapDiv.addEventListener("click", function(e){
        console.log("wrapDiv 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    innerP.addEventListener("click", function(e){
        console.log("innerP 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    textSpan.addEventListener("click", function(e){
        console.log("textSpan 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    // 冒泡阶段绑定的事件
    window.addEventListener("click", function(e){
        console.log("window 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    document.addEventListener("click", function(e){
        console.log("document 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    document.documentElement.addEventListener("click", function(e){
        console.log("documentElement 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    document.body.addEventListener("click", function(e){
        console.log("body 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    wrapDiv.addEventListener("click", function(e){
        console.log("wrapDiv 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    innerP.addEventListener("click", function(e){
        console.log("innerP 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    textSpan.addEventListener("click", function(e){
        console.log("textSpan 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);
</script>

demo页面效果图
图片描述

这个时候，如果点击一下 textSpan这个元素，控制台会打印出这样的内容：
图片描述

当按下鼠标点击后，到底发生了什么的，现在我基于上面的例子来说一下：

  capture=>start: 捕获阶段
window=>operation: window
document=>operation: document
documentElement=>operation: documentElement
body=>operation: body
wrapDiv=>operation: wrapDiv
innerP=>operation: innerP
target=>start: 目标阶段
textSpan=>operation: textSpan
textSpan2=>operation: textSpan
bubble=>start: 冒泡阶段
innerP2=>operation: innerP
wrapDiv2=>operation: wrapDiv
body2=>operation: body
documentElement2=>operation: documentElement
document2=>operation: document
window2=>operation: window
capture->window->document->documentElement->body->wrapDiv->innerP->target->textSpan->textSpan2->bubble->innerP2->wrapDiv2->body2->documentElement2->document2->window2

从上面所画的事件传播的过程能够看出来，当点击鼠标后，会先发生事件的捕获

  • 捕获阶段：首先 window会获捕获到事件，之后 document、 documentElement、 body会捕获到，再之后就是在body中DOM元素一层一层的捕获到事件，有 wrapDiv、 innerP。

  • 目标阶段：真正点击的元素 textSpan的事件发生了两次，因为在上面的JavaScript代码中， textSapn既在 捕获阶段绑定了事件，又在 冒泡阶段绑定了事件，所以发生了两次。但是这里有一点是需要注意，在目标阶段并不一定先发生在捕获阶段所绑定的事件，而是先绑定的事件发生，一会会解释一下。

  • 冒泡阶段：会和捕获阶段相反的步骤将事件一步一步的冒泡到 window

那可能有一个疑问，我们不用 addEventListener绑定的事件会发生在哪个阶段呢，我们来一个测试，顺便再演示一下我在上面的目标阶段所说的 目标阶段并不一定先发生捕获阶段所绑定的事件是怎么一回事。
我们重新改一下 JavaScript代码：

  <script>
    var wrapDiv = document.getElementById("wrapDiv");
    var innerP = document.getElementById("innerP");
    var textSpan = document.getElementById("textSpan");

    // 测试直接绑定的事件到底发生在哪个阶段
    wrapDiv.onclick = function(){
        console.log("wrapDiv onclick 测试直接绑定的事件到底发生在哪个阶段")
    };

    // 捕获阶段绑定事件
    window.addEventListener("click", function(e){
        console.log("window 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    document.addEventListener("click", function(e){
        console.log("document 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    document.documentElement.addEventListener("click", function(e){
        console.log("documentElement 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    document.body.addEventListener("click", function(e){
        console.log("body 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    wrapDiv.addEventListener("click", function(e){
        console.log("wrapDiv 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    innerP.addEventListener("click", function(e){
        console.log("innerP 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    textSpan.addEventListener("click", function(){
        console.log("textSpan 冒泡 在捕获之前绑定的")
    }, false);

    textSpan.onclick = function(){
        console.log("textSpan onclick")
    };

    textSpan.addEventListener("click", function(e){
        console.log("textSpan 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    // 冒泡阶段绑定的事件
    window.addEventListener("click", function(e){
        console.log("window 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    document.addEventListener("click", function(e){
        console.log("document 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    document.documentElement.addEventListener("click", function(e){
        console.log("documentElement 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    document.body.addEventListener("click", function(e){
        console.log("body 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    wrapDiv.addEventListener("click", function(e){
        console.log("wrapDiv 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    innerP.addEventListener("click", function(e){
        console.log("innerP 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    textSpan.addEventListener("click", function(e){
        console.log("textSpan 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);
</script>

再看控制台的结果：
图片描述

  • 图中第一个被圈出来的解释： textSpan是被点击的元素，也就是目标元素，所有在 textSpan上绑定的事件都会发生在 目标阶段，在绑定捕获代码之前写了绑定的冒泡阶段的代码，所以在 目标元素上就不会遵守先发生捕获后发生冒泡这一规则，而是先绑定的事件先发生。

  • 图中第二个被圈出来的解释：由于 wrapDiv不是目标元素，所以它上面绑定的事件会遵守先发生捕获后发生冒泡的规则。所以很明显用 onclick直接绑定的事件发生在了冒泡阶段。

target和currentTarget

上面的代码中写了 e.target和 e.currentTarget，还没有说是什么， target和 currentTarget都是 event上面的属性， target是真正发生事件的DOM元素，而 currentTarget是当前事件发生在哪个DOM元素上。
可以结合控制台打印出来的信息理解下， 目标阶段也就是 target == currentTarget的时候。我没有打印它们两个因为太长了，所以打印了它们的 nodeName，但是由于 window没有 nodeName这个属性，所以是 undefined。

阻止事件传播

说到事件，一定要说的是如何阻止事件传播。总是有很多帖子说 e.stopPropagation()是阻止事件的冒泡的传播，实际上这么说并不是很准确，因为它不仅可以阻止事件在冒泡阶段的传播，还能阻止事件在捕获阶段的传播。
来看一下我们再改一下的JavaScript代码：

  <script>
    var wrapDiv = document.getElementById("wrapDiv");
    var innerP = document.getElementById("innerP");
    var textSpan = document.getElementById("textSpan");

    // 测试直接绑定的事件到底发生在哪个阶段
    wrapDiv.onclick = function(){
        console.log("wrapDiv onclick 测试直接绑定的事件到底发生在哪个阶段")
    };

    // 捕获阶段绑定事件
    window.addEventListener("click", function(e){
        console.log("window 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    document.addEventListener("click", function(e){
        console.log("document 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    document.documentElement.addEventListener("click", function(e){
        console.log("documentElement 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    document.body.addEventListener("click", function(e){
        console.log("body 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    wrapDiv.addEventListener("click", function(e){
        console.log("wrapDiv 捕获", e.target.nodeName, e.currentTarget.nodeName);
        // 在捕获阶段阻止事件的传播
        e.stopPropagation();
    }, true);

    innerP.addEventListener("click", function(e){
        console.log("innerP 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    textSpan.addEventListener("click", function(){
        console.log("textSpan 冒泡 在捕获之前绑定的")
    }, false);

    textSpan.onclick = function(){
        console.log("textSpan onclick")
    };

    textSpan.addEventListener("click", function(e){
        console.log("textSpan 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    // 冒泡阶段绑定的事件
    window.addEventListener("click", function(e){
        console.log("window 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    document.addEventListener("click", function(e){
        console.log("document 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    document.documentElement.addEventListener("click", function(e){
        console.log("documentElement 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    document.body.addEventListener("click", function(e){
        console.log("body 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    wrapDiv.addEventListener("click", function(e){
        console.log("wrapDiv 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    innerP.addEventListener("click", function(e){
        console.log("innerP 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    textSpan.addEventListener("click", function(e){
        console.log("textSpan 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);
</script>

我们在事件的捕获阶段阻止了传播，看一下控制台的结果：
图片描述
实际上我们点击的是 textSpan，但是由于在捕获阶段事件就被阻止了传播，所以在 textSpan上绑定的事件根本就没有发生，冒泡阶段绑定的事件自然也不会发生，因为阻止事件在捕获阶段传播的特性， e.stopPropagation()很少用到在捕获阶段去阻止事件的传播，大家就以为 e.stopPropagation()只能阻止事件在冒泡阶段传播。

阻止事件的默认行为

e.preventDefault()可以阻止事件的默认行为发生，默认行为是指：点击a标签就转跳到其他页面、拖拽一个图片到浏览器会自动打开、点击表单的提交按钮会提交表单等等，因为有的时候我们并不希望发生这些事情，所以需要阻止默认行为，这块的知识比较简单，可以自己去试一下。

与事件相关的兼容性问题

这里只是简单提一下兼容性问题，不做过多的展开。对于绑定事件，ie低版本的浏览器是用 attachEvent，而高版本ie和标准浏览器用的是 addEventListener， attachEvent不能指定绑定事件发生在捕获阶段还是冒泡阶段，它只能将事件绑定到冒泡阶段，但是并不意味这低版本的ie没有事件捕获，它也是先发生事件捕获，在发生事件冒泡，只不过这个过程无法通过程序控制。

其实事件的兼容性问题特别的多，比如获取事件对象的方式、绑定和解除绑定事件的方式、目标元素的获取方式等等，由于古老的浏览器终究会被淘汰，不过多展开了。

相关 [浏览器 事件 模型] 推荐：

浏览器事件模型中捕获阶段、目标阶段、冒泡阶段实例详解

- - SegmentFault 最新的文章
如果对事件大概了解，可能知道有事件冒泡这回事，但是冒泡、捕获、传播这些机制可能还没有深入的研究实践一下，我抽时间整理了一下相关的知识. 本文主要对事件机制一些细节进行讨论，过于基础的事件绑定知识方法没有介绍. 特别少的篇幅关注浏览器兼容问题，毕竟原理了解了，兼容性问题可以自己想办法解决了. 在浏览器相对标准化之前，各个浏览器厂商都是自己实现的事件模型，有的用了冒泡，有的用了捕获，W3C为了兼顾之前的标准，将事件发生定义成如下三个阶段：.

浏览器事件的思考

- - 博客 - 伯乐在线
doSomeThing();//这个方法貌似很有名. 上面的代码看起来像是很好的完成了我们交给它的工作， 浏览器不会再将我们重定向到href中的链接，但这么做到底有什么不对呢. 在解释有什么不对前，我们来看看浏览器中事件中的几个概念. 当我们点击某一个链接的时候，浏览器会直接跳转，在表单中按回车，表单会自动提交，这些都是浏览器的默认行为.

跨浏览器resize事件分析

- - CSDN博客Web前端推荐文章
window一次resize事件：. IE7 触发3次, IE8 触发2次, IE9 触发1次, IE10 触发1次. window resize时，部分组件需要重置大小（一次）；部分组件不需要重置大小；. 优点：分Debounced和Throttled两种类型，类型明确. 大多数场景使用jquery-smartresize的Debounced即可满足一次调用即可.

Sunglass 让人们在浏览器上设计 3D 模型

- - HiWebGLHiWebGL
CAD，对于职业建筑师或工业设计师来说，这个词一定不会陌生. 它是计算机辅助设计（Computer Aided Design）的简称，不过一般3维模型的设计都要购买价格在几千到几万块钱的 CAD 软件. Sunglass，一家成立不久的创业公司，不仅将 CAD 软件搬到了浏览器上，同时还让用户免费使用基础的 CAD 功能（更多功能需要付费）.

浏览器中关于事件的那点事儿

- - 博客园_知识库
　　在前端中，有一个很重要的概念就是事件. 我对于事件的理解就是使用者对浏览器进行的一个动作，或者说一个操作. 　　本文会介绍很多与事件有关的东西，虽然我的出发点有那么点一网打尽的意思m不过也难以盖全，所以就把最常用，最基本也相对重要的内容拿出来记录一下. 　　Javascript绑定事件的方式. 　　因为各种历史原因，事件的绑定在不同的浏览器总是有不同的写法，当然现在可能大多数人都已经习惯于jQuery的事件绑定，而不清楚javascript的原生事件绑定是什么样子.

JavaScript单线程和浏览器事件循环简述

- - 破狼 Blog
JavaScript单线程. 在上篇博客 《Promise的前世今生和妙用技巧》的开篇中，我们曾简述了JavaScript的单线程机制和浏览器的事件模型. 应很多网友的回复，在这篇文章中将继续展开这一个话题. 当然这里是博主的一些理解，如果还存在什么纰漏的话，请不吝指教. JavaScript这门语言运行在浏览器中，是以单线程的方式运行的.

兼容所有浏览器的 DOM 载入事件

- - Harttle Land
本文就页面载入问题讨论 DOMContentLoaded、 load、 readyState等DOM事件的浏览器兼容性， 并给出怎样绑定DOM载入事件以兼容所有的浏览器. 接着介绍jQuery对该问题的实现源码，以及jQuery中 $(document).ready()和 $(window).load()方法的区别.

javaScript跨浏览器事件处理程序

- - SegmentFault 最新的文章
最近在阅读 javascript高级程序设计，事件这一块还是有很多东西要学的，就把一些思考和总结记录下. 在事件处理，事件对象，阻止事件的传播等方法或对象存在着浏览器兼容性问题，开发过程中最好编写成一个通用的事件处理工具. //在这里添加一些通用的事件处理方法. 事件的绑定主要为IE8以下浏览器做兼容处理：.

兼容各个浏览器版本的事件监听器工具

- - CSDN博客推荐文章
作者：kingwolf_JavaScript 发表于2012-5-15 19:12:15 原文链接. 阅读：6 评论：0 查看评论.

[译]跨浏览器的多点触控与鼠标事件处理

- Stanley - UED TEAM,用户体验设计,web前端开发
原作者Ted Johnson, Graphics Program Manager Lead, Internet Explorer. 译者sunnylqm，转发请注明. 本文主要解释了Web开发者如何通过使用IE10中新引入的pointer事件模型、iOS上的touch事件模型以及W3C标准的扩展鼠标事件模型来编写普适的跨浏览器的触控事件处理代码.