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

时间  2019-11-05
标签 浏览器 事件 模型 捕获 阶段 目标 冒泡 实例 详解 栏目 浏览器 繁體版
原文   原文链接

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

  • 本文主要对事件机制一些细节进行讨论，过于基础的事件绑定知识方法没有介绍。
  • 特别少的篇幅关注浏览器兼容问题，毕竟原理了解了，兼容性问题能够本身想办法解决了。

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

一、捕获阶段
二、目标阶段
三、冒泡阶段

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

HTML前端

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

CSSjava

<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>

JavaScriptnode

<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
bubbleend=>start: 冒泡阶段结束
capture->window->document->documentElement->body->wrapDiv->innerP->target->textSpan->textSpan2->bubble->innerP2->wrapDiv2->body2->documentElement2->document2->window2->bubbleend

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

  • 捕获阶段：首先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没有事件捕获，它也是先发生事件捕获，再发生事件冒泡，只不过这个过程没法经过程序控制。

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

欢迎关注【本期节目】，微信公众号ID：benqijiemu。
这里有：互联网思考、软件&工具推荐、前端技术等。
能够在公众号回复我，但愿和你们一块儿交流全部与互联网相关的事情~
图片描述

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程