首页 > JS应用 > 浅谈js的事件冒泡与事件捕获

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

作者: 分类:JS应用 点击: 29 次
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事件的函数;

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

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

或许你会感兴趣的文章:

发表评论

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

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