javascript - 冒泡事件和捕获事件到底有什么区别？

问题描述

问 题

冒泡事件和捕获事件到底有什么区别？
能不能形象的说明一下
谢谢

解决方案

请楼主认真的看完我的解答，没时间画图，所以请自己手画一下。
打个比方，你有3个元素，分别是body div a，其中body包含了div，而div也包含了a元素，所以总的来说，可以理解为body为爷爷，div是爸爸，而a标签则是最底层的儿子元素。
这个时候，当你给body在冒泡阶段绑定了点击事件，alert("body在冒泡阶段被点击啦")，同时还在body的捕捉阶段绑定了点击事件，alert("body在捕捉阶段被点击啦")，其余的div和a标签也是同理绑定冒泡捕捉事件，一共加起来绑定了6个事件。
接下来，我们在浏览器中试验，当我们点击底层的a(儿子)元素的时候，浏览器会依次弹出 "body在捕捉阶段被点击了" "div在捕捉阶段被点击了" "a在捕捉阶段被点击了" "a在冒泡阶段被点击了" "div在冒泡阶段被点击了" "body在冒泡阶段被点击了"。
然而，当你点击的地方发生了改变，不再是儿子a标签的时候，而是我们的爸爸元素div标签，这个时候浏览器就会弹出 "body在捕捉阶段被点击了" "div在捕捉阶段被点击了" "div在冒泡阶段被点击了" "body在冒泡阶段被点击了" 不知道楼主有没有发现，此时我们的 "a XXX" 事件并没有被触发，所以对于冒泡和捕捉事件，其实我们可以理解为，当我们当前点击的事件本身的父元素也绑定了冒泡事件和捕捉事件的时候，我们才会看的出区别，如果我们点击元素的父元素根本没有绑定事件，那你根本不用管冒泡捕捉。

这篇关于javascript - 冒泡事件和捕获事件到底有什么区别？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！