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()。