zoukankan      html  css  js  c++  java
  • 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和冒泡、捕获可以阻止某个元素上的特定事件

  • 相关阅读:
    VMdomainXml
    C 本地文件夸网文件Cp操作
    C++ auto 与 register、static keyword 浅析
    机器学习笔记——SVM
    NYOJ 298-点的变换(经典矩阵解决点平移、缩放、翻转和旋转)
    HDU 5407 CRB and Candies(LCM +最大素因子求逆元)
    Java总结之网络
    五月份小结
    算法——字符串匹配之BM算法
    javaweb_page指令
  • 原文地址:https://www.cnblogs.com/lodadssd/p/7764567.html
Copyright © 2011-2022 走看看