zoukankan      html  css  js  c++  java
  • js的事件冒泡,事件捕获

     

    addEventListener() 方法可以指定 "useCapture" 参数来设置传递事件类型:false→冒泡       true→捕获       默认false。

    内部元素为p标签,外部元素为div标签,实验效果图如下:

    在 冒泡 中,内部元素的事件会先被触发,然后再触发外部元素,顺序:内部==>外部

    css:
    .whb100{ 100px;height: 100px;border:1px dotted red}
    .whb200{ 200px;height: 200px;border:1px dotted #2ea6df}
    .center{margin-left: 25%;margin-top: 25%;}
    html:
    <div  class="whb200 useCaptureFalse" id="">
          <p  class="whb100 center useCaptureFalse2"></p>
    </div>
    js:
    var useCaptureFalse=document.querySelector(".useCaptureFalse")
    var useCaptureFalse2=document.querySelector(".useCaptureFalse2")
    useCaptureFalse2.addEventListener("click", function() {
        alert(" 你点击了 p 元素 !");
    }, false);
    useCaptureFalse.addEventListener("click", function(event) {
        alert("你点击了 div 元素!");
        console.log(event)
    }, false);
    

    在 捕获 中,外部元素的事件会先被触发,然后再触发内外部元素,顺序:外部==>内部

    css:
    .whb100{ 100px;height: 100px;border:1px dotted red}
    .whb200{ 200px;height: 200px;border:1px dotted #2ea6df}
    .center{margin-left: 25%;margin-top: 25%;}
    html:
    <div  class="whb200 useCaptureFalse" id="">
          <p  class="whb100 center useCaptureFalse2"></p>
    </div>
    js:
    var useCaptureFalse=document.querySelector(".useCaptureFalse")
    var useCaptureFalse2=document.querySelector(".useCaptureFalse2")
    useCaptureFalse2.addEventListener("click", function() {
        alert(" 你点击了 p2 元素 !");
    }, false);
    useCaptureFalse.addEventListener("click", function(event) {
        alert("你点击了 div2 元素!");
        console.log(event)
    }, false);
    

     

  • 相关阅读:
    POJ 1837 (DP)
    POJ 2255(分治递归)
    红球多于白球的概率(分治递归)
    HDOJ 4039 (Data_Structure)
    管道问题(prim)
    寻找给定区间内第K小的数(分治递归)
    大数加法
    1000元购物券 (分治递归)
    POJ 1308(并查集) (Data_Structure)
    我的2012年还不是世界末日
  • 原文地址:https://www.cnblogs.com/naturl/p/9604695.html
Copyright © 2011-2022 走看看