zoukankan      html  css  js  c++  java
  • Javascript事件传播

      MicroSoft的设计是当事件在元素上触发时,该事件将接着在该节点的父节点触发,以此类推,事件一直沿着DOM树向上传播,直到到达顶层对象document元素。这种自底向上的事件传播方式称为“事件冒泡”。

      在基于W3C标准的浏览器中,事件传播首先是从最外层的元素传播到最内层的目标元素(这称为事件的“捕获”阶段),然后事件的传播讲反转方向,从最内层的元素在冒泡到最外层的元素。

    回顾addEventListener()方法和removeEventListener()方法,

    targetElemen.addEventListener(type,listener,useCapture);

    targetElemen.removeEventListener(type,listener,useCapture);

    参数useCapture=false,则将事件传播的冒泡阶段绑定事件,否则use=true,则将事件传播的捕获阶段绑定事件。

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>BodyTest</title>
    </head>
    <body>
        <div id ="div1">
            <div id="div2">
                I am inside a div.
            </div>
        </div>
        <script type="text/javascript">
            var div1 = document.getElementById("div1");
            var div2 = document.getElementById("div2");
            div1.addEventListener("click",eventHandle1,true);
            div1.addEventListener("click",eventHandle3,false);
    
            div2.addEventListener("click",eventHandle4,true);
            div2.addEventListener("click",eventHandle2,false);
            function eventHandle1(){alert("1");}
            function eventHandle2(){alert("2");}
            function eventHandle3(){alert("3");}
            function eventHandle4(){alert("4");}
        </script>
    </body>
    </html>

    输出顺序:1423

  • 相关阅读:
    关于最短路算法
    牛客网练习赛7-D-无向图(bfs,链式前向星)
    51nod蜥蜴与地下室(1498)(暴力搜索)
    poj1062昂贵的聘礼(枚举+最短路)
    训练题(代码未检验)(序列前k大和问题)
    两个序列求前k大和
    欧拉回路
    hdu 6063 RXD and math
    hdu 6066 RXD's date
    bzoj 4300 绝世好题
  • 原文地址:https://www.cnblogs.com/littlewriter/p/6244231.html
Copyright © 2011-2022 走看看