这篇文章主要介绍了关于对js的事件冒泡和事件捕获的分析,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下
联系:
(1)、都是 事件触发时序问题 的术语。 (2)、绑定事件方法(addEventListener)的第三个参数是控制事件触发顺序的,默认为false,即事件冒泡;若为true,即事件捕获。
区别:
(1)、事件冒泡: 从触发事件的那个节点一直到document,是自下而上的去触发事件。 (2)、事件捕获: 从document到触发事件的那个节点,即自上而下的去触发事件。
(1)、冒泡事件图示:
<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)、阻止事件冒泡
e.stopPropagation();
事件捕获图示:
<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事件的函数;
(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的事件冒泡和事件捕获的分析的详细内容,更多请关注php中文网其它相关文章!
已抢187166个
抢已抢67532个
抢已抢353860个
抢已抢668697个
抢已抢124065个
抢已抢26395个
抢