每一个javascript事件（例如：click，mouseover等）都会冒泡到父级节点。当我们需要给多个元素调用同一个函数时这点会很有用。比如，我们要为一个表格绑定这样的行为：点击td后，把背景色设置为红色，代码如下：

$(".myTable td").click(function(){    $(this).css("background","red");});

假设有100个td元素，在使用以上方式的时候，你绑定了100个事件，这将带来很负面的性能影响。那么有什么更好的方式呢？

代替这种效率很差的多元素事件监听的方法就是，你只需向它们的父节点绑定一次事件，然后通过 event.target 获取到点击的当前元素，代码如下：

$(".myTable").click(function(e){        var $click=$(e.target); //e.target捕捉到触发的目标元素；        $click.css("background","red");});

在改进方式中，你只为一个元素绑定了1个事件，显然，这种方式的性能要优于之前那种。同时，在jquery1.7之后版本提供了一个新的方式on(),来帮助你将整个事件监听封装到一个便利方法中，如下所示：

$(".myTable").on("click","td",function(){    $(this).css("background","red");});

巧妙运用事件代理的方式会写出更好的代码。举个比较全的栗子，细细品味一下：

    
                     
     
              
       
        
姓名
        
班级
        
年龄
       
               
                    
张三
                    
四年级1班
                    
10
               
               
                    
李四
                    
四年级1班
                    
10
               
               
                    
王五
                    
四年级1班
                    
10
               
               
                    
赵六
                    
四年级1班
                    
10
               
          
     
    
     
        
      
你好
        
      
我好
        
      
大家好
        
      
我勒个去
        
      
好吧