解析：浏览器事件冒泡及事件捕获
今天的效率有點奇葩，說高吧，一個上午做了不少事。說低吧，因為一個分布式的算法花了我不少時間，終于有點頭緒。估計明天會寫一篇文章來講述一下自己的看法。
而今天，還是回到前端。今天來說說事件冒泡和事件捕獲。首先肯定是概念：什么是事件冒泡？什么是事件捕獲？
簡單地說，事件冒泡和事件捕獲都是一種事件傳遞的機制。這種機制可以使事件在不同級的元素間傳遞。事件冒泡是從事件觸發的源節點，向父節點傳遞，直到到達最頂節點。而事件捕獲則是從最頂節點，逐步向下傳遞，直到到達事件觸發的源節點。
在一些標準的瀏覽器中，如Chrome、Firefox等，支持這兩種冒泡方式。而事實上，準確的說，是這兩種方式的混合方式。因為W3C采取的就是這兩種方式的結合：先從頂級節點開始，將事件向下傳遞至源節點，再從源節點冒泡至頂節點。
而在IE及Opera（以下說的都是老版本的歐朋，新版本的歐朋經檢測是支持事件捕獲的）下，是不支持事件捕獲的。而這個特點最明顯體現在事件綁定函數上。
IE、Opera的事件綁定函數是attachEvent，而Chrome等瀏覽器則是addEventListener，而后者比前者的參數多了一個——這個參數是一個布爾值，這個布爾值由用戶決定，用戶若設為true，則該綁定事件以事件捕獲的形式參與，若為false則以事件冒泡的形勢參與。而這個參數在IE和Opera瀏覽器中是不存在的——根本原因是它們不支持事件捕獲。
下面我來提供一個例子讓大家更好地理解事件冒泡和事件捕獲(本來想用flex布局，后來想偷懶，所以還是算了，大家不要注意細節(*^__^*) 嘻嘻……)：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style>div {margin: 0 auto;}#ele1 {width: 500px;height: 500px;background: green;line-height: 500px;text-align: center;}#ele2 {width: 300px;height: 300px;line-height: 300px;background: blue;text-align: center;display: inline-block;vertical-align: middle;}#ele3 {width: 200px;height: 200px;background: red;display: inline-block;vertical-align: middle;}</style> </head> <body><div id="ele1"><div id="ele2"><div id="ele3"></div></div></div><a id="test" href="http://baidu.com/">click</a><script type="text/javascript">window.onload = function() {var e1 = document.getElementById('ele1');var e2 = document.getElementById('ele2');var e3 = document.getElementById('ele3');var link = document.getElementById('test');e1.addEventListener('click',function(evt) {console.log('ele1-click');},true);e2.addEventListener('click',function(evt) {console.log('ele2-click');});e3.addEventListener('click',function(evt) {console.log('ele3-click');evt.stopPropagation();});link.addEventListener('click',function(evt) {console.log('^_^，I have stopped it!')evt.preventDefault();});};</script> </body> </html>可以留意到，我在例子中還增加了一個preventDefault的例子，因為我看到網上許多文章都把它和stopPropagation放在一起討論，所以這里也讓大家了解一下。
總結
以上是生活随笔為你收集整理的解析：浏览器事件冒泡及事件捕获的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 一汽启明的PDM解决方案
- 下一篇： H5在线CAD后台读写CAD文件