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

Question

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

Answer 1

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

Answer 2

捕捉事件和冒泡事件的区别 捕捉就是从window-document-html-body-p-ul-li-p-a; 而冒泡的顺序正好和捕捉相反： a-p-li-ul-p-body-html-document-window

Answer 3

简单一点的话，
捕获就是从不具体到具体元素，比如从body到具体触发事件的event.target=button；
而冒泡就是从具体元素到不具体元素，即button到body。