在之前的學習中，我們接觸了各種事件操作。在jQuery中，我們除了使用“基本事件”的方式來為元素添加事件之外，還可以使用“綁定事件”的方式為元素添加事件。
在文檔加載完成後，如果我們想要為元素綁定某個事件來完成某些操作，可以使用on()方法來實現。在jQuery中，我們可以使用on()方法為某些元素綁定一個事件或者多個事件。
語法：
$().on(type , fn)
說明：
這裡使用了on()方法的簡略語法，完整語法請參考。新手朋友們只需要掌握這個簡略語法即可。
type為必選參數，表示事件類型，例如單擊事件是“click”，雙擊事件是“dbclick”，以此類推。注意一下，這裡type是一個字符串。
fn為必選參數，表示事件的處理函數。
在jQuery中，on()方法可以為“已經存在的元素”添加綁定事件。
舉例:
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").on("click", function () {
alert(" 學習網jQuery入門教程！");
})
})
</script>
</head>
<body>
<input id="btn" type="button" value="按鈕"/>
</body>
</html>
在浏覽器預覽效果如下：
分析：
這裡的按鈕是已經在HTML中存在的了，我們使用on()方法為按鈕綁定了一個單擊事件。細心的小伙伴們可能回想，我們使用click()方法為按鈕添加單擊事件不也行嗎？
$("#btn").on("click", function () {
alert(" 學習網jQuery入門教程！");
})
其實上面這段代碼等價於：
$("#btn").click(function () {
alert(" 學習網jQuery入門教程！");
})
從上面分析，我們可以得出一個結論：在jQuery中，如果我們想要為某些元素添加某個事件來完成操作，可以有2種方法：
基本事件，指的是使用click()、dbclick()這種“事件方法”。而綁定事件，指的是使用on()方法。
在jQuery中，on()方法不僅可以為“已經存在的元素”添加綁定事件，還可以為“未來創建的元素”添加綁定事件。所謂的“未來創建的元素”指的是使用jQuery創建的元素。
舉例:
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
var $btn = $('<input id="btn" type="button" value="按鈕"/>');
$($btn).appendTo("body");
$("#btn").on("click", function () {
alert(" 學習網jQuery入門教程！");
});
})
</script>
</head>
<body>
</body>
</html>
在浏覽器預覽效果如下：
分析：
這裡的按鈕本身並不存在於HTML中，而是使用jQuery來創建的。on()方法不僅可以為“已經存在的元素”添加綁定事件，而且還可以為“未來創建的元素”添加綁定事件。
像上面這個例子，我們試著用click()方法為其添加單擊事件，會發現這種方式無效。這裡也體現了“綁定事件”和“基本事件”的區別。“基本事件”無法為“未來創建的元素”添加綁定事件，而“綁定事件”卻可以為“未來創建的元素”添加綁定事件。
此外，on()方法還有一種綁定多個事件的語法，感覺沒太多卵用。就算綁定多個事件，我們直接使用多個on()方法就行了。因此大家為了減輕記憶負擔，可以直接忽略掉這種語法格式。
在JavaScript的學習中，相信有不少小伙伴們都接觸過JavaScript的綁定事件。對於JavaScript的綁定事件，我們還需要做兼容處理，往往都是寫上那麼一大堆代碼：
//定義綁定事件函數
function addEvent(obj, type, fn) {
//兼容IE浏覽器
if (obj.attachEvent) {
obj.attachEvent("on" + type, fn);
}
//兼容非IE浏覽器
else {
obj.addEventListener(type, fn, false);
}
}
但是在jQuery中，如果我們想要綁定事件，僅僅使用on()方法就可以完美兼容各大浏覽器，而不需要像JavaScript那樣寫上一大堆兼容代碼。這裡再次展示了jQuery完美的兼容性。
同時也告訴我們初學者：為了浏覽器的兼容性，我們更傾向於選擇jQuery而不是原生的JavaScript。當然，這只是針對初學者哈。
疑問1、在jQuery中綁定事件不是還有bind()和live()麼？為什麼站長不給我們詳細講解一下？
從jQuery1.7開始（我們現在用的是jQuery1.12.0），對於綁定事件，jQuery官方都建議使用on()方法來統一取代以前的bind()、live()和delegate()；對於解綁事件，jQuery官方也建議使用off()方法來統一取代以前的unbind()、die()和undelegate()。因此，大家必須了解和清楚這一點。