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。事件触发顺序变更为自外向内,这就是事件捕获。

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

      事件冒泡: 

       

      阻止默认行为:

        

  • 相关阅读:
    Hadoop_HDFS文件读写代码流程解析和副本存放机制
    Hadoop_MapReduce流程
    Hadoop_YARN框架
    Spark任务流程笔记
    3D俄罗斯方块设计
    Hadoop_FileInputFormat分片
    二叉查找树的懒惰删除(lazy deletion)
    数组的三种随机排序方法
    SpringBoot @Async 异步处理业务逻辑和发短信逻辑
    json字符串转java对象
  • 原文地址:https://www.cnblogs.com/yuerdong/p/9138333.html
Copyright © 2011-2022 走看看