事件冒泡和事件捕获

最新推荐文章于 2025-04-19 12:49:59 发布

weixin_44817116

最新推荐文章于 2025-04-19 12:49:59 发布

阅读量149

点赞数

CC 4.0 BY-SA版权

文章标签：事件冒泡事件捕获

本文链接：https://blog.youkuaiyun.com/weixin_44817116/article/details/89060152

事件流原理图如下：

IE提出的是冒泡流，而网景提出的是捕获流，后来在W3C组织的统一之下，JS支持了冒泡流和捕获流，但是目前低版本的IE浏览器还是只能支持冒泡流(IE6,IE7,IE8均只支持冒泡流)，所以为了能够兼容更多的浏览器，建议大家使用冒泡流。

js为元素绑定一个点击事件：冒泡过程

oChild.οnclick=function(){ console.log("chlid"); }

js为元素点击多个点击事件：可以设置捕获过程或者冒泡过程

oChild.addEventListener("click",function(){ console.log("chlid"); },false); //冒泡过程

oChild.addEventListener("click",function(){ console.log("chlid"); },true); //捕获过程

举例

var oParent=document.getElementsByClassName("parent")[0];

var oChild=document.getElementsByClassName("child")[0];

oParent.addEventListener("click",function(){

console.log("parent-1");

},true)；

oParent.addEventListener("click",function(){

console.log("parent-2");

},true);

oChild.addEventListener("click",function(){

console.log("chlid");

},true);

打印结果