js的事件冒泡和事件捕获

Posted 世界之魂

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js的事件冒泡和事件捕获相关的知识,希望对你有一定的参考价值。

一、定义

事件捕获:从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绑定事件,子级元素的事件冒泡到父级div进行响应;

<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的事件冒泡和事件捕获的主要内容,如果未能解决你的问题,请参考以下文章

js函数中 如何阻止事件冒泡

js 事件捕获和事件冒泡的执行顺序探讨

JS事件冒泡和事件捕获

js的事件冒泡和事件捕获

JS的事件冒泡和事件捕获

[JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播