jquery on方法（事件委托）
jquery绑定事件处理函数的方法有好几个，比如：bind()，on()，delegate()，live()。
其中delegate和live都是用on实现的，效果也类似，live好像在1.7版本中已经废弃了。
这里重点看看on的用法：
$(el).on( events [, selector ] [, data ], handler(eventObject) )
如果省略了selector参数，on方法和bind方法效果一样。
如果传递了参数selector，其实就生成了一个“事件委托”。
什么是“事件委托”呢？
我们知道浏览器事件传播时经历了三个过程：捕获阶段 、目标阶段 和 冒泡阶段。
事件捕获是指事件从document到触发事件的目标对象（event.target）的过程；
事件冒泡是指从触发事件的目标对象（event.target）到document的过程。
当我们点击一个元素的时候，除了会触发该元素的click事件，也会冒泡触发其祖先元素的click事件（包括document）。
利用这一特性，我们可以直接在一个元素（比如document）上绑定一个事件处理函数来处理该元素所有子孙元素的该事件，当然，这里一般会在处理函数里判断event.target，根据触发事件的目标对象不同进行不同的操作。这一过程就叫事件委托。
on方法传递了参数selector时就构成了一个上面这样的事件委托，关于selector参数的介绍jquery文档中描述的不是很清楚，看网上很多文章关于这块都理解的有点偏差，所以写代码测试了一下：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery on方法</title> <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script> </head> <body> <div style="position:relative;width:800px;height:600px;margin:0 auto;background-color:lightblue;"> <div id="middle" style="position:absolute;top:50%;left:50%;width:600px;height:400px;margin:-200px 0 0 -300px;background-color:blue;"> <div id="inter" style="position:absolute;top:50%;left:50%;width:400px;height:200px;margin:-100px 0 0 -200px;background-color:darkblue;"> <div id="innter" style="position:absolute;top:50%;left:50%;width:200px;height:100px;margin:-50px 0 0 -100px;background-color:black;"> </div> </div> </div> </div> <script> $(function(){ $("div").on( "click", "#inter", {o1:'hi',o2:'jquery'}, function(e){ console.log(this,e.data); //e.stopPropagation(); } ); }); </script> </body> </html>
测试用例中用了4个嵌套的div，用on方法给div元素绑定click事件的处理函数，其中selector参数传递的为“#inter”，点击#outer和#middle时没有结果输出，当点击#inter或#innter时执行结果都为：
根据事件冒泡的顺序和div的层数我们可以分析出每次的两行输出都是#middle和#outer两个div的click事件处理函数执行的结果。
综合分析得出：
如果on方法传递了selector参数（且不为null），只有当selector是el的子孙元素，且触发事件的元素是selector或者selector的子孙元素时，才会触发绑定在el上的事件处理函数。
最后顺便一提，取消用on绑定的事件处理函数的方法是off()。
