在項目中使用HTMLDom的事件冒泡機制

在項目中，經(jīng)常要創(chuàng)建如下如所示的控件，在一個DIV中，動態(tài)的生成一些多選框或者單選框，讓用戶選擇，從而激發(fā)事件，使頁面上其它的控件作根據(jù)用戶的選擇做出相應。

這種控件很常見，也比較容易實現(xiàn)，通常的實現(xiàn)方式可能是先在頁面中創(chuàng)建一個DIV，然后再給DIV添加選項，給每個選項都添加事件處理函數(shù)，左圖的HTML代碼為

對應的JavaScript代碼為

通常情況下，這種方法沒有什么問題，但是如果選項很多，而且選項會變化的情況下，上面的實現(xiàn)方式就有些麻煩了，當選項由1、2、3、4變化為5、6、7、8時，則需要將1、2、3、4的事件處理函數(shù)刪除，再為新選項5、6、7、8添加事件處理函數(shù)，而且懶惰的程序員總是忘記把1、2、3、4的事件處理函數(shù)刪除，從而造成許多不可預測的（內(nèi)存泄漏、性能等）問題。

通過運用HTMLDom的事件冒泡機制，可以比較巧妙的解決這類問題。看下面的代碼，

上面的代碼只為Panel的body（也就是id為container的DIV）注冊了click事件，根據(jù)Dom的事件冒泡機制，點擊div內(nèi)部的所有元素，都會激發(fā)click事件，這樣我們只要根據(jù)處理函數(shù)的第二個參數(shù)el進行判斷一下，就可以做相應的處理了。

這樣做還有個優(yōu)點，就是div的內(nèi)容動態(tài)更新時，不需要維護那些checkbox的事件處理函數(shù)，因為沒有給他們注冊任何事件。

另外，Ext.Container也有類似的bubble和cascade函數(shù)，顧名思義，bubble向上冒泡，cascade向下擴散。

如果在實際的項目中恰當?shù)哪軌蜻\用這些技巧，可以為簡化類似的任務。