2014年辛星解讀Javascript之DOM之冒泡和捕獲，辛星dom
上篇部落格提到了Javascript事件綁定函數的三個參數，第一個是一個event，第二個是一個function，第三個是一個布爾變數，它用於指定事件傳遞的順序，分為冒泡和捕獲兩種方式，接下來我們將揭開它的神秘面紗，徹底的解讀它。
首先看如下代碼：
<html><body><div id = "demo"><p id = "tag">辛星</p></demo><script type="text/javascript">document.getElementById("demo").addEventListener("click",mydemo);document.getElementById("tag").addEventListener("click",myshow);function myshow(){ alert("標籤p被觸發");}function mydemo(){ alert("標籤div被觸發");}</script></body></html> 那麼對於上述HTML檔案，如果我們點擊了“辛星”這個字樣，那麼先出現哪個彈窗呢？如果讀者把上述代碼拷貝下來，尾碼命名為一個HTML檔案，那麼會發現它先彈窗“標籤p被觸發”，等我們對它點了確定之後，才是“標籤div被觸發”，那麼，這是什麼機制呢？
這就是因為第三個參數在起作用，第三個參數預設是false，即採用冒泡的方式，什麼是冒泡呢？如果大家學習過演算法，會發現有個冒泡排序，很簡單，就是氣泡會從下向上浮動，這種方式表示我們先響應小的標籤，再響應大的標籤，比如這裡p標籤就是div標籤的子項目，因此，這裡先響應p標籤綁定的事件，然後再響應div標籤綁定的點擊事件。
如果把第三個參數改成true，則效果正好相反，先響應父標籤的事件，再響應子標籤的事件。如果就講這些東西，顯得這篇博文是湊數的，那麼我們就再介紹一些東西。這裡說一下removeEventListener這個函數，它用於解除綁定，即把我們的事件和事件的回呼函數解除綁定。
不過這個addEventListener和removeEventListener對於瀏覽器的相容性上並不是那麼好，還是IE系列在作怪，IE8之下的版本不支援，但是IE8支援使用element.attachEvent（event，function)來綁定，用element.detachEvent(event,function)來解除綁定。
對於瀏覽器的相容性，確實一個比較讓人頭疼的問題，特別是在中國這種IE使用量還很大的國家，哎，只能慢慢承受折磨了。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
