码迷,mamicode.com
首页 > Web开发 > 详细

js的事件冒泡和事件捕获

时间:2017-11-01 01:06:30      阅读:248      评论:0      收藏:0      [点我收藏+]

标签:方法   col   click   默认   使用   event   css   listen   定义   

一、定义

事件捕获:从document到触发事件的那个节点,自上而下触发事件;

事件冒泡:从触发事件节点依次向上触发事件,直到document。

原声js中,绑定事件方法addEventListener(eventName,function,bool)的第三个参数控制事件触发顺序。true为捕获,false为冒泡,默认冒泡。

event.stopPropagation()会阻止事件流的传播。

二、实例

html结构:

<div id=‘parent‘>
        <div id=‘child‘>
        </div>
 </div>

给div绑定事件:

1.冒泡过程

parent.addEventListener(‘click‘, function(){
    console.log(‘parent‘);
},false);
child.addEventListener(‘click‘, function(){
    console.log(‘child‘);
},false);
body.addEventListener(‘click‘, function(){
    console.log(‘body‘);
},false);

结果如下:

技术分享

2.捕获过程

parent.addEventListener(‘click‘, function(){
    console.log(‘parent‘);
},true);
child.addEventListener(‘click‘, function(){
    console.log(‘child‘);
},true);
body.addEventListener(‘click‘, function(){
    console.log(‘body‘);
},true);

结果如下:

技术分享

三、应用

1.事件委托:利用事件冒泡处理动态元素事件绑定的方法。

<div id=‘parent‘>
        <div class=‘child‘></div>
        <div class=‘child‘></div>
        <div class=‘child‘></div>
    </div>

如果要给class为child的div绑定动态事件,使用冒泡则效率最高:

parent.addEventListener(‘mousemove‘, function(event){
        var tDiv =event.target;
        if ($(tDiv).hasClass(‘child‘)) {
           $(tDiv).css(‘background‘, ‘red‘).siblings().css(‘background‘, ‘green‘);
        }     
        return false;   
    },false);

2.结合stopPropagation和冒泡、捕获可以阻止某个元素上的特定事件

js的事件冒泡和事件捕获

标签:方法   col   click   默认   使用   event   css   listen   定义   

原文地址:http://www.cnblogs.com/lodadssd/p/7764567.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!