JS事件冒泡与捕获、addEventListener--实例演示

问题:

 <div class='item' id='outer' onclick="alert('outer')">
    <div class='item' id='inner' onclick="alert('inner');">
      <div class='item' id='core' onclick="alert('core')">
         core!!!!!
      </div>
    </div>
  </div>

1.上面div中,如果单击core,会执行多少个alert?先后顺序是什么?


 该问题的答案取决于浏览器的对事件处理的机制。对于下图的结构,当两个element都绑定了onclick方法时,执行的顺序是什么?

-----------------------------------
| element1                        |
|   -------------------------     |
|   |element2               |     |
|   -------------------------     |
|                                 |
-----------------------------------

Netscape主张元素1的事件首先发生,这种事件发生顺序被称为捕获型

微软则保持元素2具有优先权,这种事件顺序被称为冒泡型

DOM同时支持两种事件模型:捕获型事件和冒泡型事件,但是,捕获型事件先发生。两种事件流会触发DOM中的所有对象,从document对象开始,也在document对象结束。

冒泡型:

     1.对于某个节点,触发的一个事件, 会首先执行当前这个dom节点绑定的方法

     2.执行完毕后,会冒泡至改节点的父节点,执行相应的函数

     3. 重复以上过程,直至Dom的根节点。


对于上文中的例子, 单击#core,

     1.首先触发alert('core')

     2.然后冒泡至#inner节点,触发alert('inner')

     3.最后冒泡至#outer节点,触发alter('outer')


假设对于#inner,我们未为onclick事件指定方法,那么在第二步,不会有方法执行,但是click的事件,仍会继续冒泡至最外层的#outer.


捕获型

事件捕获的顺序刚好与之相反

  1.当一个事件发生时,最外层的已绑定该事件的方法会执行

  2.然后该事件会下降至他的子节点,触发相应的方法

  3.重复1,2的过程

如何加入一个捕获型/冒泡型事件

 参照上文给出的例子,我们直接在html中绑定事件方法, 这个事件就是冒泡型事件

 <div class='item' id='outer' onclick="alert('outer')">

当采用原生Javascript(非Jquery)方法, 我们使用addEventListener绑定事件 当第三个参数是false的时候, 这个事件就是冒泡型事件(第三个参数的默认值是false).以下两种写法等价。

core.addEventListener("click",function(){alert('dddddd')},false);

core.addEventListener("click",function(){alert('dddddd')});

 我们使用addEventListener绑定事件 当第三个参数是true的时候, 这个事件就是捕获型事件

core.addEventListener("click",function(){alert('dddddd')},true);

 addEventListe

core.addEventListener("click",function(){alert('dddddd')},true);

2. stopPropagation()是停止冒泡事件流。

      当我们为一个事件绑定的方法中,添加一句stopPropagation,那么该事件的冒泡过程到此为止,其后的所有节点绑定事件都不执行;

3. 没有方法去停止捕获事件流,当然,从功能上看也即没必要,也不合理。

4.除去addEventListener之外,通过attachEvent也可以绑定事件,attachEvent有哪些参数,执行顺序是什么?使用哪种机制?如果同时使用addEventListener和attachEvent,执行顺序又是怎样的?


4.下面是代码,保存成html文件,看看效果;


<html>
<head>
  <style type="text/css">
     .item{
         display: table;
         margin: 100px;
     }
     #outer{
         width:400px;
         height:400px;
         background-color: blue;         
     } 
     #inner{
         vertical-align: middle;
         width:200px;
         height:200px;
         background-color: white;         
     }
     #core{
         width:80px;
         height:80px;
         background-color: red;
         text-indent: 10px;
         line-height: 50px;         
     }
  </style>
  
</head>
<body>
  <div class='item' id='outer' onclick="alert('outer')">
    <div class='item' id='inner' onclick="alert('inner');stopbubble(arguments[0])">
      <div class='item' id='core' onclick="alert('core')">
         core!!!!!
      </div>
    </div>
  </div>
</body>
<!--you must write <script> under <body>-->
<script type='text/javascript'>  
        var core = document.getElementById('core');
        core.addEventListener("click",function(){alert('dddddd')},false);
        //addEventListener: can add one more event to node "core"     
        function stopbubble(e){
              e.stopPropagation();//stop bubble event on this node 
        }
</script>
</html>


 


前端效果:

1475823025183702.png

点击core!!!后:

1.先alert core 因为绑定了dddd,然后会alert  dddd;

2.然后冒泡到inner节点后,alert inner,但是同时执行stopbubble(arguments[0])来停止冒泡;

3.停止冒泡后,该node后续节点就不执行了,所以不会alert outer;


修改时间 2016-10-07

真诚赞赏,手留余香
赞赏
随机推荐
axios上传图片遇到的问题
ffmpeg 下载加密的切片视频 m3u8
Node-MySQL 官方文档
php执行cli程序
Android Studio卡在refreshing gradle project的原因和快速解决办法
jQuery Mobile弹出对话框后不刷新原页面,保持原页面内容不变
SVG,字体图标的替代者
Javascript游戏中的“透视”
四种常见的 POST 提交数据方式
CentOS 7 挂载和卸载扩展云盘