on函數是在jquery 1.7 加入的
實際應用例子：http:///a/bjac/scdm44l9.htm
參考：http:///a/bjad/1rp5vfq4.htm
描述: 在選定的元素上綁定一個或多個事件處理函數。
定義：
.on( events [, selector ] [, data ], handler(eventObject) )
參數：
events
類型: String
一個或多個空格分隔的事件類型和可選的命名空間，或僅僅是命名空間，比如"click", "keydown.myPlugin", 或者 ".myPlugin"。
selector
類型: String
一個選擇器字符串，用於過濾出被選中的元素中能觸發事件的後代元素。如果選擇器是 null 或者忽略了該選擇器，那麼被選中的元素總是能觸發事件。
data
類型: Anything
當一個事件被觸發時，要傳遞給事件處理函數的event.data。
handler(eventObject)
類型: Function()
事件被觸發時，執行的函數。若該函數只是要執行return false的話，那麼該參數位置可以直接簡寫成 false。
定義：
.on( events [, selector ] [, data ] )
events
類型: PlainObject
一個對象，鍵是由一個或多個由空格分隔的事件類型及可選的名字空間，值是這些事件類型所對應的事件處理函數。
selector
類型: String
一個選擇器字符串，用於過濾出被選中的元素中能觸發事件的後代元素。如果選擇器是 null 或者忽略了該選擇器，那麼被選中的元素總是能觸發事件。
data
類型: Anything
當一個事件被觸發時，要傳遞給事件處理函數的event.data。
.on()方法事件處理程序到當前選定的jQuery對象中的元素。在jQuery 1.7中，.on()方法 提供綁定事件處理的所有功能。為了幫助從舊的jQuery事件方法轉換過來，查看 .bind(), .delegate(), 和 .live(). 要刪除的.on()綁定的事件，請參閱.off()。要綁定一個事件，並且只運行一次，然後刪除自己， 請參閱.one()
參考：
http:///a/bjad/n828yb7w.htm
http:///a/bjac/bg0m15bi.htm
Event names and namespaces（事件名稱和命名空間）
任何事件的名稱，可以作為events 參數。jQuery將通過所有浏覽器的標准JavaScript事件類型，當用戶操作事件，如click，浏覽器會調用handler參數的函數。此外，.trigger()方法可以觸發標准的浏覽器事件 和 自定義事件名綁定的處理程序。
事件名稱可以添加指定的event namespaces（命名空間） 來簡化刪除或觸發事件。例如，"click.myPlugin.simple"為 click 事件同時定義了兩個命名空間 myPlugin 和 simple。通過上述方法綁定的 click 事件處理，可以用.off("click.myPlugin") 或 .off("click.simple")刪除綁定到相應元素的Click事件處理程序，而不會干擾其他綁定在該元素上的“click（點擊）” 事件。命名空間類似CSS類，因為它們是不分層次的;只需要有一個名字相匹配即可。以下劃線開頭的名字空間是供 jQuery 使用的。
在.on()方法的第二種用法中，events參數是一個JavaScript對象或者鍵值對。鍵等同於events參數，用空格分隔的事件名稱字符串和可選命名空間。每個鍵的值是一個函數（或false 的值），相當於 handler 參數，但是該值並不是方法中的最後一個參數。在其它方面，這兩種形式在下面描述的內容中其行為都是相同的。如下所述。
Direct and delegated events（直接和委托的事件）
大多數浏覽器事件冒泡, 或者 傳播，都是由內到外的，從在文檔最深處的元素( 事件目標 event target)開始， 一路傳遞到body和document元素。（愚人碼頭注：事件冒泡簡單的說就是，在冒泡路徑上所有綁定了相同事件類型的元素上都會觸發這些類型的事件。）在Internet Explorer 8和更低，一些事件，如change 和 submit本身不泡沫，但 jQuery 為了跨浏覽器一致性， jQuery 在這些事件上模擬了冒泡行為。
如果省略selector或者是null，那麼事件處理程序被稱為直接事件 或者 直接綁定事件 。每次選中的元素觸發事件時，就會執行處理程序，不管它直接綁定在元素上，還是從後代（內部）元素冒泡到該元素的
當提供selector參數時，事件處理程序是指為委派 事件（愚人碼頭注：通常也有很多人叫它代理事件）。事件不會在直接綁定的元素上觸發，但當selector參數選擇器匹配到後代（內部元素）的時候，事件處理函數才會被觸發。jQuery 會從 event target 開始向上層元素(例如，由最內層元素到最外層元素)開始冒泡，並且在傳播路徑上所有綁定了相同事件的元素若滿足匹配的選擇器，那麼這些元素上的事件也會被觸發。
事件處理只能綁定在當前被選中的元素上;而且，在您的代碼調用.on()的時候，他們必須在頁面文檔中已經存在。為了確保目前的元素可以被選擇的（愚人碼頭注：即，存在），最好是在 document 的 ready 事件中進行事件綁定。如果新的HTML被注入頁面時，新的HTML放置到頁面後，事件會綁定到匹配選擇器（selector參數）的元素。或者，使用委派事件綁定事件處理程序，如下所述。
委托事件有一個優勢，他們能在後代元素添加到文檔後，可以處理這些事件。 在確保所選擇的元素已經存在的情況下，進行事件綁定時，您可以使用委派的事件，以避免頻繁的綁定事件及解除綁定事件。 例如，這個已經存在的元素可以是 Model-View-Controller（模型 - 視圖 - 控制器）模式中 View（視圖） 的一個容器元素，或document。如果想監視所有文檔中的冒泡事件的話。在加載任何其它 HTML 之前，document 元素在 head 中就是有效的，所以您可以安全的在 head 中進行事件綁定，而不需要等待文檔加載完。
除了可以給未創建的後代元素綁定事件外（即上面提到的優勢），代理事件的另一個好處就是，當需要監視很多元素的時候，代理事件的開銷更小。例如，在一個表格的 tbody 中含有 1,000 行，下面這個例子會為這 1,000 元素綁定事件：
$("#dataTable tbody tr").on("click", function(event){
alert($(this).text());
});
委派事件的方法只有一個元素的事件處理程序，tbody，並且事件只會向上冒泡一層（從被點擊的tr 到 tbody ）:
$("#dataTable tbody").on("click", "tr", function(event){
alert($(this).text());
});
注意: 委托事件不能用於SVG.
The event handler and its environment（事件處理程序和它的環境）
handler參數必須是一個函數（或false值，見下文）， 除非你傳遞一個對象給events參數。 您可以提供一個匿名處理函數給.on()調用，就像上面例子中的用法，或者可以聲明一個函數，然後再將該函數名作為參數：
function notify() { alert("clicked"); }
$("button").on("click", notify);
當浏覽器觸發一個事件或其他JavaScript調用的jQuery的.trigger()方法，jQuery傳遞一個event object給這個處理程序，它可以用來分析和改變事件的狀態。這個對象是由浏覽器提供一個數據的標注化子集;您需要浏覽器自己的未經修改的原始 event 對象，您可以使用event.originalEvent得到。例如， event.type 包含事件的名稱（例如， "resize" ）和event.target表示事件除非的最深元素（最內層）。
默認情況下，大多數事件的冒泡從最初的 event target（目標元素） 開始的，直到document 元素。每個元素都沿著DOM層級這條路，jQuery會調用任何匹配的已被綁定的事件處理程序。一個處理程序可以調用的event.stopPropagation()防止事件向上冒泡文檔樹（ 從而防止這些元素的處理程序運行）。任何綁定到當前元素上的其他處理程序都將運行，為了防止這種情況，可以調用event.stopImmediatePropagation()。（綁定在元素上的事件被調用的順序和它們被綁定的順序時一樣的。 ）
類似地，一個處理程序可以調用的event.preventDefault()取消浏覽器默認操作行為;例如，一個鏈接上有一個 默認的click事件。並非所有的浏覽器事件的默認操作，並非所有的默認操作可以被取消。有關詳細信息，請參閱W3C Events Specification
調用event.stopPropagation() 和 event.preventDefault()會從一個事件處理程序會自動返回false。也可以直接將 false 當作 handler 的參數，作為 function(){ return false; } 的簡寫形式。因此，下面的寫法 $("a.disabled").on("click", false); 將會阻止所有含有 "disabled" 樣式的鏈接的默認行為，並阻止該事件上的冒泡行為。
當jQuery的調用處理程序時，this關鍵字指向的是當前正在執行事件的元素。對於直接事件而言，this 代表綁定事件的元素。對於代理事件而言，this 則代表了與 selector 相匹配的元素。(注意，如果事件是從後代元素冒泡上來的話，那麼 this 就有可能不等於 event.target。)若要使用 jQuery 的相關方法，可以根據當前元素創建一個 jQuery 對象，即使用 $(this)。
Passing data to the handler（將數據傳遞到處理程序）
如果data參數給.on()並且不是null 或者 undefined，那麼每次觸發事件時，event.data都傳遞給處理程序。data參數可以是任何類型，但如果是字符串類型時，那麼selector參數必須提供，或明確地傳遞null，這樣的 data 參數不會誤認為是選擇器。最好是使用一個對象（鍵值對） ，所以可以作為屬性傳遞多個值。
jQuery的1.4 ，相同的事件處理程序可以多次綁定到一個元素。這對於使用 event.data 功能，或者在閉包中使用唯一的數據時是特別有用的。例如：
function greet(event) { alert("Hello "+event.data.name); }
$("button").on("click", { name: "Karl" }, greet);
$("button").on("click", { name: "Addy" }, greet);
按一下按鈕時，上面的代碼會產生兩個不同的警報。
除了可以向 .on() 方法傳入 data 參數外，還可以向 .trigger() 或 .triggerHandler() 中傳入該參數。
Event performance（事件性能）
在大多數情況下，一個事件如click很少發生，性能表現並不顯注。但是，高頻率事件比如mousemove 或者 scroll可以每秒觸發幾十個次，在這種情況下明智地使用事件變得更加重要。可以按如下的辦法提高事件的性能：減少事件處理函數中的工作量；對於在事件處理函數中要用到的信息做好緩存而不是再重新計算一次；或使用setTimeout限制的頁面更新的實際次數。
許多委派的事件處理程序綁定到 document 樹的頂層附近，可以降低性能。每次發生事件時，jQuery 需要比較從 event target（目標元素） 開始到文檔頂部的路徑中每一個元素上所有該類型的事件。為了獲得更好的性能，在綁定代理事件時，綁定的元素最好盡可能的靠近目標元素。避免在大型文檔中，過多的在 document 或 document.body 上添加代理事件。
jQuery可以非常迅速處理tag#id.class形式的簡單選擇器，當它們是用來過濾委派事件。所以"#myForm", "a.external", 和 "button" 都是快速選擇器。若代理事件的選擇器使用了過於復雜的形式，特別是使用了分層選擇器的情況，雖然說這樣做會大大的降低性能，但是對於大多數應用而言，它的速度依然是足夠快的。通過為尋找更合適的元素綁定事件的方法，就可以很簡單的避免使用分層選擇器的情況。例如，使用$("#commentForm").on("click", ".addNew", addComment)而不是$("body").on("click", "#commentForm .addNew", addComment)。
Additional notes（其他注意事項）
有一些事件的速記方法比如.click()可用於附加或觸發事件處理程序。對於速記方法的完整列表， 參見events category
雖然不建議，偽類事件名稱"hover"可以作為"mouseenter mouseleave"的縮寫使用。不要與 接受兩個函數的.hover()方法混淆，這裡只用一個處理函數綁定到偽類事件名稱"hover";處理程序應該檢查的event.type 以確定是否是mouseenter或 mouseleave事件。
jQuery的事件系統需要一個DOM元素可以通過元素的屬性附加數據，使事件就可以被跟蹤和傳遞。object, embed, 和applet元素不能綁定數據，因此不能有jQuery的事件綁定。
W3C指定明確指定focus 和 blur事件沒有冒泡，但是jQuery定義的跨浏覽器的focusin 和 focusout事件，並且可以冒泡。當focus 和 blur綁定委派的事件處理程序時，jQuery分析名稱，並提供將他們分別交付給focusin 和 focusout。為了保持一致性和清晰度，使用冒泡事件類型的名稱。
在所有的浏覽器，load ，scroll, 和 error 事件(例如, 在一個 <img> 元素上)不會冒泡。在Internet Explorer 8和更低，paste 和 reset事件不會冒泡，這樣的事件是不支持委派使用，但若事件處理函數是直接綁定在產生事件的元素上的話，是可以使用這些事件的。
window對象上的error 事件使用非標准的參數和返回值約定，所以jQuery 不支持該事件。作為替代，直接用window.onerror屬性分配一個處理函數。
例子:
Example: 當點擊段落時，顯示該段落中的文本：
$("p").on("click", function(){
alert( $(this).text() );
});
Example: 向事件處理函數中傳入數據，並且在事件處理函數中通過名字來獲取傳入的數據：
function myHandler(event) {
alert(event.data.foo);
}
$("p").on("click", {foo: "bar"}, myHandler)
Example: 取消表單的提交動作，並且通過返回 false 的方法來防止事件冒泡：
$("form").on("submit", false)
Example: 通過使用 .preventDefault()，僅取消默認的動作。
$("form").on("submit", function(event) {
event.preventDefault();
});
Example: 通過使用 .stopPropagation()，防止提交事件的冒泡行為，但是並不禁止提交行為。
$("form").on("submit", function(event) {
event.stopPropagation();
});
Example: 添加並觸發自定義事件（非浏覽器事件）。
<!DOCTYPE html>
<html>
<head>
<style>
p { color:red; }
span { color:blue; }
</style>
<script type="text/javascript" src="http:///keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
</head>
<body>
<p>Has an attached custom event.</p>
<button>Trigger custom event</button>
<span style="display:none;"></span>
<script>
$("p").on("myCustomEvent", function(e, myName, myValue){
$(this).text(myName + ", hi there!");
$("span").stop().css("opacity", 1)
.text("myName = " + myName)
.fadeIn(30).fadeOut(1000);
});
$("button").click(function () {
$("p").trigger("myCustomEvent", [ "John" ]);
});
</script>
</body>
</html>
例子: 使用 對象 同時添加多個事件處理函數。
<!DOCTYPE html>
<html>
<head>
<style>
.test { color: #000; padding: .5em; border: 1px solid #444; }
.active { color: #900;}
.inside { background-color: aqua; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div class="test">test div</div>
<script>$("div.test").on({
click: function(){
$(this).toggleClass("active");
},
mouseenter: function(){
$(this).addClass("inside");
},
mouseleave: function(){
$(this).removeClass("inside");
}
});</script>
</body>
</html>
例子: 點擊任何一個段落時，就在它後面追加一個段落。注意，.on() 會為任何段落添加事件，包括新生成的段落，因為當事件冒泡到已經存在的 body 元素上時，就會觸發綁定的事件。
<!DOCTYPE html>
<html>
<head>
<style>
p { background:yellow; font-weight:bold; cursor:pointer;
padding:5px; }
p.over { background: #ccc; }
span { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>Click me!</p>
<span></span>
<script>
var count = 0;
$("body").on("click", "p", function(){
$(this).after("<p>Another paragraph! "+(++count)+"</p>");
});
</script>
</body>
</html>
Example: 當點擊段落時，顯示該段落中的文本：
$("body").on("click", "p", function(){
alert( $(this).text() );
});
Example: 使用 preventDefault 方法，取消鏈接的默認動作。
$("body").on("click", "a", function(event){
event.preventDefault();
});