JS事件传播机制

最新推荐文章于 2022-10-25 15:49:04 发布
最新推荐文章于 2022-10-25 15:49:04 发布
阅读量224 收藏
点赞数
分类专栏： js 文章标签： js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zxw200529/article/details/119813962
版权

JS的事件传播模式分为两种:

      1.捕获模式(由外到内传播)

      2.冒泡模式(由内到外传播)

捕获模式:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
             margin: 0 auto;
        }
         .outdiv {
              width: 150px;
              height: 150px;
              border: 1px solid #ccc;
         }
           .middlediv {
            width: 100px;
              height: 100px;
              border: 1px solid #ccc;
              margin-top: 25px;
         }
         .innerdiv {
              width: 50px;
              height: 50px;
              border: 1px solid #ccc;
              margin-top: 25px;
         }


    </style>
</head>
<body>
     <div class="outdiv">
   
         <div class="middlediv">
     
              <div class="innerdiv">
                  
              </div>
         </div>
     </div>
     <script>
          var out = document.querySelector('.outdiv')
          var mid = document.querySelector('.middlediv')
          var inner = document.querySelector('.innerdiv')
          //addEventListener第三个参数默认为false为冒泡模式 设置为true为捕获模式
          out.addEventListener('click',function() {
               console.log('outdiv');
          },true)
          mid.addEventListener('click',function() {
               console.log('middiv');
          },true)
          inner.addEventListener('click',function() {
               console.log('innerdiv');
          },true)
     </script>
</body>
</html>

   

     如图:当点击最里面的盒子是触发外层、中间、内层盒子的click事件

     输出顺序为：outdiv、middiv、innerdiv

     

 

   冒泡模式:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
             margin: 0 auto;
        }
         .outdiv {
              width: 150px;
              height: 150px;
              border: 1px solid #ccc;
         }
           .middlediv {
              width: 100px;
              height: 100px;
              border: 1px solid #ccc;
              margin-top: 25px;
         }
         .innerdiv {
              width: 50px;
              height: 50px;
              border: 1px solid #ccc;
              margin-top: 25px;
         }


    </style>
</head>
<body>
     <div class="outdiv">
   
         <div class="middlediv">
     
              <div class="innerdiv">
                  
              </div>
         </div>
     </div>
     <script>
          var out = document.querySelector('.outdiv')
          var mid = document.querySelector('.middlediv')
          var inner = document.querySelector('.innerdiv')
          out.addEventListener('click',function() {
               console.log('outdiv');
          },false)
          mid.addEventListener('click',function() {
               console.log('middiv');
          },false)
          inner.addEventListener('click',function() {
               console.log('innerdiv');
          },false)
     </script>
</body>
</html>

将true改为false 设置为冒泡模式

此时点击innerdiv盒子输出顺序为:innerdiv、middiv、outdiv 从内向外传播

zxw200529
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS中事件的传播
Fantasc的博客
08-10 754
事件的传播： 介绍：最初，微软和网景两个公司有不同的见解，前者认为事件的触发由内而外，先触发当前元素的事件，再向当前事件的祖先元素上传播，事件应该在冒泡阶段被触发。后者认为事件的触发是由外向内的，当事件被触发时，应该先触发当前元素的事件，随后再向当前元素的后代元素传播。 W3C的决定：其综合了两家公司的不同理解，将事件的传播分为三个阶段： 捕获阶段：从最外层的祖先元素开始，(W3C规定的最外层祖先元素为document，一般浏览器将最外层的祖先元素设置为window)，想目标元素进行事件的捕获，在此捕
javascript防止事件传播
03-01
上面例子的html文件 博文链接：https://zhyt710.iteye.com/blog/227892
js的事件传播机制
萝卜砸大坑
06-27 1246
1. 什么是事件传播？ 事件传播（event propagation）是事件冒泡（event bubbling）和事件捕获(event capturing)的统称: 事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点。在事件冒泡阶段只有标记为非捕获的监听器才会被调用。也就是那些调用 addEventListener() 时第三个参数为 false 时注册的监听器。默认值即为false。 事件捕获：不太具体的DOM节点应该更早接收到事件，而最具体的节点应该最后接收到事件。在
JavaScript中事件的传播
plannothing的博客
08-16 166
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width:300px; height: 300px; background-color: yellowgreen; } #box2{ width:200px; height
js 事件的传播机制(实例讲解)
10-19
下面小编就为大家带来一篇js 事件的传播机制(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
深入理解JS DOM事件机制
11-27
2、事件冒泡IE的事件流叫做事件冒泡(event bubbling)，即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。3、事件捕获事件捕获的思想是不太具体的节点...
JavaScript事件冒泡机制原理实例解析
01-21
这篇文章主要介绍了JavaScript事件冒泡机制原理实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 DOM事件流（event flow ）存在三个阶段：事件捕获阶段...
JavaScript事件传播机制
weixin_44209472的博客
03-07 1864
事件的默认传播机制有三种：事件捕获，目标阶段及冒泡阶段 1、事件捕获：通俗的理解就是，当鼠标点击或者触发dom事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话，会先触发父元素绑定的事件。 2、目标阶段：事件对象传递到事件目标。如果事件的type属性表明后面不会进行冒泡操作，那么事件到此就结束了。 3、事件冒泡：与事件捕获恰恰相反，事...
js事件传播
weixin_62515884的博客
08-12 182
事件传播
js 事件传播机制、事件委托
weixin_43294560的博客
12-16 1050
当我们点击了一个事件， 首先做的的第一件事就是从外层的元素，直接穿梭到我们的目标元素，这个阶段会执行所有捕获阶段的函数。在dom节点 绑定过多的监听事件，必定造成内存浪费。所以就有一种优化： 就是事件委托。这时候事件流在沿着相反的方向一直向上执行所有函数。事件捕获阶段：从window对象传导到目标节点。然后事件流切换到目标阶段，执行自身的事件函数。冒泡阶段：从目标节点传回window对象。目标阶段：事件在目标节点上触发。
JavaScript事件的传播
一只正在狂飙的肥兔
12-07 1112
本文主要讲述了：什么是事件传播？事件传播的方式、如何阻止事件的传播？ 最后通过一个案例，更加直观的介绍了一下事件的传播，并且总结了一下事件传播中需要注意的一些问题。
js事件的传播
xing_kai_kai的博客
07-22 182
事件的传播 关于事件的传播网景公司和微软公司有不同的理解 微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。 网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，然后在向内传播给后代元素 W3C综合了两个公司的方案，将事件传播分成了三个阶段 1.捕获阶段 在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件 2.目标阶段 事
js事件传递
douxubao的博客
11-06 188
var evt = document.createEvent("MouseEvents"); evt.initEvent("click", true, true); //注册事件 document.getElementById("hello").dispatchEvent(evt); //触发dom元素事件 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>he
JavaScript之事件的传播
qq_34550459的博客
04-27 267
当一个事件触发了之后，它会在父、子元素之间进行传播。 一、 事件传播的三个阶段 捕获阶段：从window对象一直传播到目标节点(由外向内传递) --不会触发事件 在捕获阶段,是从最外层的祖先元素,向目标元素进行事件的捕获,但是默认情况下,不会触发事件 目标阶段： 在目标节点上触发事件 事件捕获到元素,捕获结束后开始在目标元素上执行事件处理函数 冒泡阶段： 从目标阶段冒泡回window对象(由内向外...
js-事件的传播
weixin_47295886的博客
10-25 267
—先捕获最外层祖先元素，向目标元素的事件进行捕获，但是默认不会触发事件。——事件从目标元素向他的祖先元素传递，分别依次触发祖先事件。件，然会再向当前元素的祖先元素上传播——事件的冒泡：内到外。微软：事件应由内向外传播，也就是当事件触发时，应当先触。网景：事件应该先触发祖先元素，外到内——事件的捕获。将事件传播分成3部分：IE8以上。——事件捕获到的目标元素。如果希望捕获阶段执行：可以将。
js中的事件传播过程
qq_42000871的博客
03-07 268
引子： 父div添加监听事件，子div设置监听事件，点击子元素，会出现什么结果 事件传播的三个过程，事件捕获阶段、处于目标阶段、事件冒泡阶段。 事件捕获由远及近逐渐靠近事件目标，事件冒泡由事件目标逐渐向上冒泡 那是不是所有的事件都要经历这三个过程呢？其实不然 IE：它认为事件流应该是事件冒泡。 Netscape：它则认为事件流应该是事件捕获。 W3C：首先是事件捕获然后事件冒泡 在支持w3c...
jqery点击事件的传播
最新发布
09-05
jQuery中的点击事件传播是基于事件冒泡和事件捕获的机制。事件冒泡就是指当一个元素上的事件被触发时，它会向父元素逐级传播，直到传播到文档根节点。事件捕获则相反，从文档根节点开始逐级向下传播直到触发事件的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值