zoukankan      html  css  js  c++  java
  • javascript——事件捕获冒泡

    事件冒泡:obj.addEventListener(eventType ,fn ,false);

    false => 冒泡(出来)

    事件捕获:obj.addEventListener(eventType ,fn ,true);

    true => 捕获(进去)

    HTML部分:

    <div id="div1">
    div1
        <div id="div2">
        div2
            <div id="div3">div3</div>
        </div>
    </div>

    CSS部分:

    div {padding: 50px;}
    #div1 {border: 1px solid red;}
    #div2 {border: 1px solid blue;}
    #div3 {border: 1px solid green; position: absolute; top: 300px;}

    JS部分:

    window.onload = function(){
    
            var oDiv1 = document.getElementById('div1');
            var oDiv2 = document.getElementById('div2');
            var oDiv3 = document.getElementById('div3');
    
            function fn1(){
                alert(this.id);
            }
    
            /*oDiv1.onclick = fn1;
            oDiv2.onclick = fn1;
            oDiv3.onclick = fn1;*/
    
            //false = 冒泡
            //告诉div,如果有一个出去的事件触发了你,你就去执行fn1这个函数
            /*oDiv1.addEventListener('click' ,fn1 ,false);
            oDiv2.addEventListener('click' ,fn1 ,false);
            oDiv3.addEventListener('click' ,fn1 ,false);    //div3->div2->div1*/
            
            //true = 捕获
            //告诉div,如果有一个进去的事件触发了你,你就去执行fn1这个函数
            /*oDiv1.addEventListener('click' ,fn1 ,true);
            oDiv2.addEventListener('click' ,fn1 ,true);
            oDiv3.addEventListener('click' ,fn1 ,true);        //div1->div2->div3*/
    
            //当点击div1时,弹出1;(div1冒泡)
            //当点击div2时,弹出2、1;(div2捕获->div1冒泡)
            //当点击div3时,弹出2、3、1;(div2捕获->div3冒泡->div1冒泡)
            oDiv1.addEventListener('click' ,function(){
                alert(1);
            } ,false);
    
            oDiv2.addEventListener('click' ,function(){
                alert(2);
            } ,true);
    
            oDiv3.addEventListener('click' ,function(){
                alert(3);
            } ,false);
    
        };
  • 相关阅读:
    canvas 方法参数智能提示
    layui 关闭弹窗,刷新父窗体页面
    UI设计灵感集结地
    Java Poi 读取excel 对所有类型进行处理
    jeecg v3.6.6 excel导入js方法完善
    父、子页面之间页面元素的获取,方法的调用
    ps载入渐变
    ps载入画笔
    做设计常用的素材下载网站
    色彩搭配神器
  • 原文地址:https://www.cnblogs.com/bokebi520/p/4353134.html
Copyright © 2011-2022 走看看