每一个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");
});
巧妙运用事件代理的方式会写出更好的代码。举个比较全的栗子，细细品味一下：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件代理</title> <style> table{border-collapse: collapse;} td,th{border:1px solid #ccc;padding:5px 10px;} .muUl{border:1px solid blue;} .muUl li{border:1px solid #ccc;padding:5px 10px;} </style> <script src="jquery-1.8.3.min.js"></script> </head> <body> <table class="myTable"> <tr><th>姓名</th><th>班级</th><th>年龄</th></tr> <tr> <td>张三</td> <td>四年级1班</td> <td>10</td> </tr> <tr> <td>李四</td> <td>四年级1班</td> <td>10</td> </tr> <tr> <td>王五</td> <td>四年级1班</td> <td>10</td> </tr> <tr> <td>赵六</td> <td>四年级1班</td> <td>10</td> </tr> </table> <ul class="muUl"> <li><a href="javascript:;">你好</a></li> <li>我好</li> <li>大家好</li> <li>我勒个去</li> <li>好吧</li> </ul> <script> $(function(){ $(".myTable").click(function(e){ var $click=$(e.target); //e.target捕捉到触发的目标元素； $click.css("background","red"); }); $(".muUl").click(function(e){ var $this =$(e.target); $this.css("background","green"); }); }); </script> </body> </html>