关于js事件委托和冒泡

在编写自定义插件时候，经常会定义插件的事件，那么掌握了事件委托和冒泡会更加得心应手，写出更加优雅的代码。

首先说冒泡：

js所谓的事件冒泡就是子级元素的某个事件被触发，它的上级元素的该事件也被递归执行。从下往上冒泡泡。

看例子：

<ul class="ulclass" sheng="heilongjiang"> 
    <li>黑河</li> 
    <li>五大连池</li> 
    <li>伊春</li> 
    <li>鹤岗</li> 
    <li>双鸭山</li> 
</ul>

js中声明事件：
$("ul[sheng='heilongjiang']").on('click',function(){ 
    alert("父元素ul被点击"); 
}); 
$("ul[sheng='heilongjiang']").on('click','li',function(){ 
    alert("子元素li被点击"); 
});
当li的点击事件被触发时，父级ul的点击事件也被触发执行。
如果某些情况下不希望冒泡：
$("ul[sheng='heilongjiang']").on('click','li',function(){ 
   e.stopPropagation();//禁用冒泡了
   alert("子元素li被点击"); 
});

接下来是事件委托：

js事件委托，其实也是使用了冒泡的原理，从点击的子元素开始，向它的父元素传播事件，
这样做好处是对于大量要处理的元素，不必为每个元素都绑定事件，只需要在他们的父元
素上绑定一次即可，提高性能。 还有一个好处就是可以处理动态插入dom中的元素，直接
绑定的方式是不行的。就是事件目标自身不处理事件，而是把处理任务委托给其父元素或者
祖先元素，甚至根元素事件委托很好地利用了"事件冒泡"。当点击子元素，根据"事件冒泡"，
该子元素的父级元素捕获了该次点击事件，并触发自己的方法。
假如现在有100个按钮，要为每个按钮绑定一个click事件，如果循环100个按钮加事件，对性能
会有一定的影响。
看下示例：

<div class="buttons">
        <bottoun type="button" class="btn">点我触发事件</bottoun>
        <bottoun type="button" class="btn">点我触发事件</bottoun>
        <bottoun type="button" class="btn">点我触发事件</bottoun>
        .......100个按钮
</div>

$(".buttons").on('click','.btn',function(){
      alert("come on baby!");
});

事件委托注意逆向思维来理解和考虑。