对于js的事件冒泡和事件捕获的分析-js教程-PHP中文网

对于js的事件冒泡和事件捕获的分析

不言

发布： 2018-07-13 16:33:40

原创

2735人浏览过

这篇文章主要介绍了关于对js的事件冒泡和事件捕获的分析，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

事件冒泡、事件捕获、事件委托

1、事件冒泡、事件捕获二者联系与区别

联系：

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

登录后复制

区别：

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

登录后复制

2、事件冒泡

（1）、冒泡事件图示：

798270603-5b4805d8cccfa_articlex[1].png

<p id="father">
   <p id="son">事件测试</p>
</p>
<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）

登录后复制

（2）、上述代码采用的事件冒泡机制：
1.当点击son元素时，先触发son的点击事件，再触发father的点击事件，打印相应的内容；
2.当点击father元素时，只触发father的点击事件，因为father元素冒泡上去没有dom元素设置了click事件的函数

（3）、阻止事件冒泡

1	`e.stopPropagation();`

登录后复制

3、事件捕获

事件捕获图示：

723602088-5b4806099fb47_articlex[1].png

<p id="father">
    <p id="son"></p>
</p>
<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事件的函数；

4、事件委托

（1）、定义

1	`事件委托：利用事件冒泡的原理。`

登录后复制

（2)、使用情况：当有多个类似元素需要绑定事件时，一个一个去绑定既浪费时间，又不利于性能，这时候可以使用事件委托，给他们的一个共同父级元素添加一个事件函数去处理他
们所有的事件情况，代码如下：

<ul id="newslist">
    <li>1234567890987654</li>
    <li>1234567890987654</li>
    <li>1234567890987654</li>
    <li>1234567890987654</li>
    <li>1234567890987654</li>
    <li>1234567890987654</li>
</ul>
<script src="jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#newslist").on("click", function (e) {
            $(e.target).css({ "background": "#f00" }).siblings().css({ "background": "#fff" });
        })
     })
</script>

登录后复制

注意：hover事件不能使用事件委托方式。

（3）、虽然上述例子中没有给li添加点击事件，为什么点击相应的li会产生效果，我们可以理解为：虽然我们没有给li设置点击事件，但是默认的点击事件是采用的时间冒泡，冒泡到父
级元素的点击事件是用事件的target属性判断进行点击的元素

e.target 表示在事件冒泡中触发事件的源元素。

并且e.target有很多属性可操作：

- e.target.nodeName  //获取事件触发元素标签的name
- e.target.id  //获取事件触发元素的id
- e.target.className  //获取事件触发元素的className
- e.target.innerHTML  //获取事件触发元素的内容

登录后复制

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

对于js的事件冒泡和事件捕获的分析

事件冒泡 、事件捕获 、 事件委托

1、事件冒泡 、事件捕获 二者联系与区别

2、事件冒泡

3、事件捕获

4、事件委托

事件冒泡、事件捕获、事件委托

1、事件冒泡、事件捕获二者联系与区别