• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > JS应用 > 浅谈js的事件冒泡与事件捕获

    浅谈js的事件冒泡与事件捕获

    作者: 分类:JS应用 点击: 171 次
    wordpress CMS主题:ssmay主题

      事件冒泡和事件捕获的联系:

      (1)、都是 事件触发时序问题 的术语。
      (2)、绑定事件方法(addEventListener)的第三个参数是控制事件触发顺序的,默认为false,即事件冒泡;若为true,即事件捕获。

      事件冒泡和事件捕获的区别:

      (1)、事件冒泡: 从触发事件的那个节点一直到document,是自下而上的去触发事件。
      (2)、事件捕获: 从document到触发事件的那个节点,即自上而下的去触发事件。

      JS事件冒泡

      <div id="father">
      <div id="son">事件测试</div>
      </div>
      <script src="jquery.min.js"></script>
      <script>
      window.onload = function () {
      //addEventListener绑定事件的第三个参数默认为false
      document.getElementById("father").addEventListener("click", function () {
      console.log("这是父亲=>" + this.id)
      });
      //addEventListener绑定事件的第三个参数默认为false
      document.getElementById("son").addEventListener("click", function () {
      console.log("这是儿子=>" + this.id)
      })
      }
      </script>

      结果:

      点击father输出结果: 这是父亲=>father
      点击son输出结果: 这是儿子=>son 这是父亲=>father (事件冒泡:先son,后father)

      上述代码采用的事件冒泡机制:

      1.当点击son元素时,先触发son的点击事件,再触发father的点击事件,打印相应的内容;
      2.当点击father元素时,只触发father的点击事件,因为father元素冒泡上去没有dom元素设置了click事件的函数

      JS事件捕获

      <div id="father">
      <div id="son"></div>
      </div>
      <script src="jquery.min.js"></script>
      <script>
      window.onload = function () {
      //addEventListener绑定事件的第三个参数默认为true
      document.getElementById("father").addEventListener("click", function () {
      console.log("这是父亲=>" + this.id)
      },true);
      //addEventListener绑定事件的第三个参数默认为true
      document.getElementById("son").addEventListener("click", function () {
      console.log("这是儿子=>" + this.id)
      },true)
      }
      </script>

      结果:

      点击father输出结果: 这是父亲=>father
      点击son输出结果: 这是父亲=>father 这是儿子=>son (事件捕获:先father,后son)

      上述代码采用事件捕捉机制:

      1.当点击son元素时,先触发father的点击事件,再触发son的点击事件,打印相应的内容;
      2.当点击father元素时,只触发father的点击事件,因为father元素从上面捕捉下来一直到father元素没有dom元素设置了click事件的函数;



      QQ二维码

    文章作者:ssmay
    本文地址:http://wanlimm.com/77201807125902.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.