在项目中使用HTMLDom的事件冒泡机制

在项目中，经常要创建如下如所示的控件，在一个DIV中，动态的生成一些多选框或者单选框，让用户选择，从而激发事件，使页面上其它的控件作根据用户的选择做出相应。

这种控件很常见，也比较容易实现，通常的实现方式可能是先在页面中创建一个DIV，然后再给DIV添加选项，给每个选项都添加事件处理函数，左图的HTML代码为

对应的JavaScript代码为

 

通常情况下，这种方法没有什么问题，但是如果选项很多，而且选项会变化的情况下，上面的实现方式就有些麻烦了，当选项由1、2、3、4变化为5、6、7、8时，则需要将1、2、3、4的事件处理函数删除，再为新选项5、6、7、8添加事件处理函数，而且懒惰的程序员总是忘记把1、2、3、4的事件处理函数删除，从而造成许多不可预测的（内存泄漏、性能等）问题。

通过运用HTMLDom的事件冒泡机制，可以比较巧妙的解决这类问题。看下面的代码，

上面的代码只为Panel的body（也就是id为container的DIV）注册了click事件，根据Dom的事件冒泡机制，点击div内部的所有元素，都会激发click事件，这样我们只要根据处理函数的第二个参数el进行判断一下，就可以做相应的处理了。

这样做还有个优点，就是div的内容动态更新时，不需要维护那些checkbox的事件处理函数，因为没有给他们注册任何事件。

另外，Ext.Container也有类似的bubble和cascade函数，顾名思义，bubble向上冒泡，cascade向下扩散。

如果在实际的项目中恰当的能够运用这些技巧，可以为简化类似的任务。