细说事件流

最新推荐文章于 2024-06-23 08:00:00 发布
最新推荐文章于 2024-06-23 08:00:00 发布
阅读量234 收藏
点赞数
分类专栏： 个人学习总结 文章标签： 事件冒泡 事件捕获 阻止冒泡 阻止默认行为 兼容处理
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Xu_Meng_Ting/article/details/103051079
版权

      相信大家对事件流有一点的认识，在这里我就通过一个例子来说明其中的细节。这是你知道的不知道的，不知道的知道的，笑死。

一、事件阶段：

      捕获阶段 目标阶段 冒泡阶段

二、案例分析

1.html部分

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

2.css部分

 <style>
        #wrapDiv,
        #innerP,
        #textSpan {
            box-sizing: border-box;
            /**width+padding+border**/
            margin: 40px;
            cursor: pointer;
        }

        #wrapDiv {
            width: 300px;
            height: 300px;
            border: crimson solid 3px;
        }

        #innerP {
            width: 200px;
            height: 200px;
            border: green solid 3px;
        }

        #textSpan {
            width: 100px;
            height: 100px;
            border: blue solid 3px;
            display: block;
        } 
</style>

3.js部分

        var wrapDiv=document.getElementById('wrapDiv');
        var innerP=document.getElementById('innerP');
        var textSpan=document.getElementById('textSpan');
        // Event.currentTarget指向事件绑定的元素，而 Event.target 则是事件触发的元素。


        // true 表示捕获阶段
        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);
        
        // false 表示冒泡阶段
        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);

4.页面效果

问题来了来了!!!

(1).当点击span结果会是什么？（先捕获后冒泡 顺序看打印结果）

 

(2).如果将目标元素的冒泡和捕获绑定顺序互换 （打印结果出了目标元素的冒泡和捕获是根据绑定的顺序有关（谁先绑定谁先触发），所以在目标阶段 不一定是先捕获后冒泡）

        // true 表示捕获阶段
        window.addEventListener('click', function (e) {
            //window无nodeName所以打印出来是undefined，不要见怪哦。
            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);
        }, false);

        // 将被点击元素提前
        textSpan.addEventListener('click', function (e) {
            console.log('textSpan捕获', e.target.nodeName, e.currentTarget.nodeName);
        }, true);

        // false 表示冒泡阶段
        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);

(3).如果给元素绑定onclick呢，和addEventLister又有什么区别呢？

A:onclick这样的事件，给同一个元素，同一个事件绑定多个处理函数后面会覆盖前面的

B:addEventLister 就可以实现同一个元素,同一个事件对应多个处理函数，不会覆盖

C:onclick和addEventLister混合使用，不会影响

D.onclick可以统一看做是在冒泡阶段，为什么这么说看下面例子

    <script>
        var wrapDiv = document.getElementById('wrapDiv');
        var innerP = document.getElementById('innerP');
        var textSpan = document.getElementById('textSpan');
        // Event.currentTarget指向事件绑定的元素，而 Event.target 则是事件触发的元素。
       
        // 添加onclick事件
        wrapDiv.onclick = function (e) {
            console.log('使用wrapDiv.onclick，直接绑定的元素，但不是直接触发的元素：在冒泡阶段触发', e.target.nodeName, e.currentTarget.nodeName);
        }
        textSpan.onclick = function (e) {
            console.log('使用textSpan.onclick，既是直接绑定的元素，又是直接触发的元素:发生在哪个阶段是根据它和绑定捕获的位置有关，谁在前谁先触发', e.target.nodeName, e.currentTarget.nodeName);
        }

        // true 表示捕获阶段
        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);


        // false 表示冒泡阶段
        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>

(4).阻止事件传播（e.stopPropagation();阻止冒泡，其实也可以阻止捕获）

        // true 表示捕获阶段
        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();
            // 或使用
            // e.cancelBubble = true;  //这个属性的规范并未统一 少用，知道就行

        }, 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);


        // false 表示冒泡阶段
        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);

 

(5).拓展:js中preventDefault()阻止事件的默认行为，而不是在阻止冒泡

// 默认行为是指：点击a标签就跳转，拖拽一个图片到浏览器会自动打开，点击表单的提交按钮会提交表单
     e.preventDefault();
     //或
    //return false;

(6).addEventListener兼容问题（使用attachEvent）

if (el.addEventListener) {
  el.addEventListener('click', modifyText, false); 
} else if (el.attachEvent)  { //兼容IE9之前
  el.attachEvent('onclick', modifyText);//无第三个参数
}

 

吞吞吐吐屠屠兔兔
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
事件流
xiaoniba1024的专栏
11-02 1818
1事件流 只要发生事件，FlashPlayer 或 AIR 就会调度事件对象。如果事件目标不在显示列表中，则 Flash Player 或 AIR 将事件对象直接调度到事件目标。例如，Flash Player 将 progress 事件对象直接调度到 URLStream对象。但是，如果事件目标在显示列表中，则 Flash Player 将事件对象调度到显示列表，事件对象将在显示列表中穿行，直到到
事件---事件流
new_life1207的博客
11-28 714
前言 事件流 事件冒泡 事件捕获 DOM事件流 前言javascript与HTML之间的交互是通过事件实现的。 事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。事件流 事件流描述的是从页面中接受事件的顺序。IE的事件流是事件冒泡流，而Netscape Communicator的事件流是事件捕获流。 事件冒泡 IE的事件流叫做事件冒泡，即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接
什么是事件流？
最新发布
2301_79420857的博客
06-23 304
概念：事件流就是当我们触发一个事件时，经过一系列操作的过程称为事件流，简单通俗来讲就是点击事件后，按顺序执行的就是事件流。那事件是什么呢？事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。
js事件流
weixin_50736511的博客
04-14 2794
什么是js事件流 事件流描述的是从页面中接受事件的顺序。 微软（IE）和网景（Netscape）开发团队提出了两个截然相反的事件流概念，IE的事件流是事件冒泡流，而Netscape的事件流是事件捕获流。 后来在W3C组织的统一之下，JS支持了冒泡流和捕获流，但是目前低版本的IE浏览器还是只能支持冒泡流(IE6,IE7,IE8均只支持冒泡流)，所以为了能够兼容更多的浏览器，建议大家使用冒泡流。 事件流包含的三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段 接下来就是介绍这两种事件流概念 事件冒泡流，
事件冒泡和事件捕获
V8min的博客
12-13 214
事件的三个阶段 捕获阶段 当前目标阶段 冒泡阶段 事件对象.eventPhase属性可以查看事件触发时所处的阶段 冒泡事件：事件由目标元素往外层触发，至document元素 <style> .box1 { width: 300px; height: 300px; background-color: cyan; } .box2 {
细说Flink CEP_152.pdf
03-24
CEP常用于需要从连续事件流中提取复杂事件的场景，例如金融市场分析、监控系统异常检测、物联网传感器数据处理等。这些场景通常涉及到从多个事件源收集数据，并实时地对这些数据进行分析处理，以便快速做出决策。 ...
细说Java NIO
10-10
1. **通道(Channel)**：通道类似于流，但它们是双向的，可以读写数据。常见的通道有FileChannel、SocketChannel和ServerSocketChannel等。 2. **缓冲区(Buffer)**：缓冲区是NIO的核心，它是数据的容器。所有的I/O...
细说电流隔离 LVDS 接口
07-06
这些良好特性可归因于内部使用的电流控制或驱动器模块的限流功能（最大3mA）。信号差分电压仅为20mV。但是，它随后在接收器侧被放大回300mV（差分）的逻辑电平。由此获得的好处包括电磁干扰(EMI)极其低、开关速度...
细说webpack源码之compile流程-入口函数run
08-28
4. 将`next`函数添加到`args`数组的末尾，以便插件可以调用它来继续事件流。 5. 开始执行第一个插件，之后每次调用`next`函数都会执行下一个插件，直到所有插件都执行完毕或出现错误。 在`before-run`事件中，我们...
细说Js中的this
hellocoder2029的博客
10-17 180
说的是执行上下文的thisbinding。this说的是当前函数的调用位置。这个是概念描述。下面通过上面的只是去分析各种情况下的thisbinding是什么东西。this 提供了一种更优雅的方式来隐式“传递”一个对象引用，因此可以将API设计得更加简洁并且易于复用。随着使用模式越来越复杂，显式传递上下文对象会让代码变得越来越混乱，使用 this 则不会这样箭头函数的this是绑定到父函数foo的，其实不是，只是沿用。因为箭头函数内部没有做任何的绑定操作。局部变量this。
事件流（事件冒泡和捕获，函数闭包等）
皮卡丘丘丘~~~
12-14 414
事件流 事件流描述的是从页面中接受事件的顺序，当几个都具有事件的元素层叠在一起的时候，那么你点击其中一个元素，并不是只有当前被点击的元素会触发事件，而层叠在你点击范围的所有元素都会触发事件。 事件流包括两种模式：冒泡和捕获 事件捕获： 父级元素先触发，子集元素后触发；（由外到内） 事件冒泡： 子集元素先触发，父级元素后触；（由内到外） 子集元素和父元素具备同样的事件，当触发子元素时，也会触发父元素...
JS 事件流
Venus_cai的博客
11-14 209
JS事件流 事件流：简单来说就是事件的传递机制 事件流分为两种： 1.冒泡：事件由具体的触发元素层层向外传递，直到最外层当代浏览器的主流机制 2.捕获：事件由最外层向内层层传递，直到具体触发者 ...
事件流是什么
火腿肠的博客
12-19 1969
事件流分为事件冒泡和事件捕获。 事件流：就是事件的流向，先捕获，再到事件源，最后再冒泡，一共分三个阶段：捕获阶段，事件源，冒泡阶段。 从上至下再出来 事件冒泡：从事件源朝父级一直到根元素（HTML）。当某个元素的某类型事件被触发时，那么它的父元素同类型的事件也会被触发，一直触发到根源上； 从具体的元素到不确定的元素。 事件捕获： 从根元素（HTML）到事件源，当某个元素的某类型事件被触发时，先触发根元素的同类型事件，朝子一级触发，一直触发到事件源。 ...
细说事件监听器里面的方法
06-07
在Java中，事件监听器是一种特殊的接口，它定义了一系列用于处理特定类型事件的方法。这些方法通常被称为事件处理方法，它们被触发时会执行相应的操作。 常见的事件监听器方法包括： 1. ActionListener接口中的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值