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

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

      事件冒泡: 

       

      阻止默认行为:

        

  • 相关阅读:
    ognl的应用1
    未命名
    flash钟表的实现
    文本显示输入字数
    HttpServlet session的用法: (2)
    $.fx与$.fn.fx 区别
    javascript 事件冒泡 和 冒泡事件阻止
    (function($){...})(jQuery) 含义
    选择城市插件 jQuery
    offset().left 用法
  • 原文地址:https://www.cnblogs.com/yuerdong/p/9138333.html
Copyright © 2011-2022 走看看