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

    先上结论:

      他们是描述事件触发时序问题的术语。事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件。相反的,事件冒泡是自下而上的去触发事件。绑定事件方法的第三个参数,就是控制事件触发顺序是否为事件捕获。true,事件捕获;false,事件冒泡。默认false,即事件冒泡。Jquery的e.stopPropagation会阻止冒泡,意思就是到我为止,我的爹和祖宗的事件就不要触发了。

      

    这是 HTML 代码
    <
    div id="parent">   <div id="child" class="child"></div> </div>
    现在我们给它们绑定上事件

    document.getElementById("parent").addEventListener("click",function(e){ alert("parent事件被触发,"+this.id); }) document.getElementById("child").addEventListener("click",function(e){ alert("child事件被触发,"+this.id) })
    结果:
    child事件被触发,child
    parent事件被触发,parent

    结论:先child,然后parent。事件的触发顺序自内向外,这就是事件冒泡。

    现在改变第三个参数的值为true

    document.getElementById(
    "parent").addEventListener("click",function(e){ alert("parent事件被触发,"+e.target.id); },true) document.getElementById("child").addEventListener("click",function(e){ alert("child事件被触发,"+e.target.id) },true)
    结果:
    parent事件被触发,parent
    child事件被触发,child

    结论:先parent,然后child。事件触发顺序变更为自外向内,这就是事件捕获。

    方法: 阻止事件冒泡 和默认行为。

      事件冒泡: 

       

      阻止默认行为:

        

  • 相关阅读:
    关于sizeof表达式作为数组元素个数的编译
    【deque】滑动窗口、双端队列解决数组问题
    【二叉树】重建二叉树
    字符数组与字符串指针
    【STL】C中的qsort与C++中的sort
    对C++不是类型安全语言的理解
    【vector】创建一个二维vector当作二维数组用
    批量处理改变文件名、文件后缀名
    位运算
    关于sqlserver帐号被禁用问题
  • 原文地址:https://www.cnblogs.com/yuerdong/p/9138333.html
Copyright © 2011-2022 走看看