什麼是event bubbling，我如何對它進行控制？
你可能注意到了，我們需要對W3C標準的addEventListener方法提供第三個argument，而且capture argument包含在了我們的attachEventListener功能中。這個argument決定了監聽起作用時所處的事件的分期。
假設你有兩個元素，一個嵌在另一個裏面：
當用戶點擊鏈結的時候，點擊事件會同時在段落以及超連結中進行註冊，問題是，哪一個首先接到事件？
事件迴圈包含兩個過程，對於這個問題的回答每個的答復都是以不同的角度進行答復的。在capture期，事件從內部先起作用，所以，段落會首先收到點擊，然後才是超連結。在bubble期，時間從外部起作用，所以，超連結會比段落更先收到點擊。
IE和Opera僅支持bubbling，這也是為什麼attachEvent不要求第三個argument的原因。對於那些支持addEventListener的流覽器，如果第三個argument是true，這個事件就會在捕捉器被捕捉，如果是false，這個事件就會在bubble期被捕捉。
對於同時支持這兩個期的流覽器，捕捉期首先發生，然後才是bubble期。假如你在每個期都設定了監聽，很可能一個事件同時在capture和bubbling期被處理。
這些分期也突出了一個事實，那就是隱藏的元素受同一個事件的影響。如果你不希望監聽啟動以後一個事件繼續影響下去，你可以停止它。在IE中，這就涉及到設置cancelBubble的屬性為true，在W3C模型中，你必須調用stopPropagation：
如果我們不希望一個事件繼續影響下去，我們可以使用如下的代碼：
雖然我們已經制定engage功能來監聽段落和超連結的click事件，但是，只有在點擊發生之後這個功能才會被調用，並且事件的影響會在監聽第一次被調用時就停止。
確定一個元素的大小
有很多變數都可以影響一個元素的大小——內容的長度、CSS規定、字體、字體大小、行高、文本放大程度……很多很多。而且，流覽器對於CSS以及字體大小的解釋並不一致，你無法預測一個元素在用戶端顯示時具體是多大的。唯一的方法就是在一個元素被流覽器顯示之後確定這個元素的大小。
解決方法
瞭解一個元素的大小對我們是有幫助的。W3C對我們沒有任何的幫助：沒有標準的檢測元素大小的方法。幸運的是，流覽器開發者們在DOM中多少給了我們一些可以使用的方法。
雖然box model差異意味著IE包括padding和border作為一個元素CSS的一部分，offsetWidth和offsetHeight屬性將返回一個元素的寬度——包括padding和border。
假設一個元素在CSS中的具體規定是這樣的：
我們可以使用JavaScript檢查相關的offsetWidth和offsetHeight來判斷那個元素的準確圖元寬度：
在IE6、Opera、Mozilla和Safari中，pixelWidth的圖元設置為450，pixelHeight的變數設置為250.在IE 5/5.5中，pixelWidth為350，pixelHeight為150。不同的流覽器，這個值是不同的，因為實際的大小是不同的。Offset尺寸一直計算某個元素的準確圖元。
如果我們不清楚一個元素的dimension，而讓它根據默認的設置顯示，那麼不同的流覽器會顯示不同的效果。
獲得正確的dimension
為了正確的確定一個元素的dimension，你必須等到流覽器已經調用完那個元素，不然的話，最後的dimension會是不同的。沒有可靠的方法確保一個流覽器已經調用完了那個元素，但是我們一般假設一個視窗下載完畢了，這個視窗中的所有元素都已經調用了。
討論
我們可以找回一個元素的dimension減去它的邊界（border），但是包括它的padding。這些值都通過clientWidth和clientHeight進行評價，比如我們上面提到的值，在IE 5/5/5中會是300和100，而在其他流覽器中會是400和200.
沒有一個property會允許你得到一個元素的寬度而沒有border或者padding。
推薦給同仁
您想要瞭解更多的免費小竅門以便提升你的網站排名嗎？
請馬上聯繫我們網站管理員:
MSN: chenlinwu@cmmail.com
Email: info@rank-ad.com
