jQuery常見事件的監聽方式
1.html標籤內聯事件
例項1：單擊頁面 "Hello" 按鈕，彈出提示框顯示 Hello world！
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文件</title>
</head>
<body>
<button onclick="alert('Hello world!')">Hello</button>
</body>
</html>注：在例項1中，事件的監聽程式碼是放在 HTML 標籤中，這種方式看起來比較直觀，但是這是一種不大提倡的事件監聽方式。首先，將檢視程式碼（HTML）與互動程式碼（JavaScript）相結合，意味著每當需要更新功能時，都必須編輯 HTML，這將給程式碼後期的維護帶來很大麻煩。其次，它不具備可擴充套件性。如果我們要將這個單擊功能附加到許多按鈕上，那麼不僅要用一堆重複的程式碼來增加頁面量，而且還會破壞可維護性。
https://www.98891.com/article-67-1.html
2.用JavaScript實現事件監聽
例項2：單擊頁面"Hello"按鈕，彈出提示框顯示Hello world！
<!doctype html>
<html>
<head>
<meta charset-"utf-8">
<title>無標題文件</title>
<script type="text/javascript">
window.onload = function {
var helloBtn = document.getElementByld("helloBtn")；
helloBtn.onclick = function() {
alert("Hello world!")；
}
}
</script>
</head>
<body>
<button id="helloBtn">Hello</button>
</body>
</html> 3.用jQuery實現事件監聽
使用jQuery監聽事件有很多種方法，如例項3所示。
例項3：單擊頁面 "Hello" 按鈕，彈出提示框顯示 Hello world！
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文件</title>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function() {
//jQuery第一種監聽事件方法
$("#helloBtn").click(function() {
alert("Hello world!");
});
//jQuery第二種監聽事件方法
$("#helloBtn").bind("click"，function() {
alert("Hello world!");
});
//jQuery第三種監聽事件方法
$("#helloBtn").on("click"，function() {
alert("Hello world!");
})；
//jQuery第四種監聽事件方法
$("body").on({
click: function() {
alert("Hello world!");
}
}, "button");
//jQuery第五種監聽事件方法
$("pody").on("click", "button", function() {
alert("Hello world!");
});
});
</script>
</head>
<body>
<button id="helloBtn">Hello</button>
</body>
</html> 注：下面具體分析例項3中用到的jQuery事件監聽方法。
（1）第一種事件監聽方法click()，是一種比較常見的、便捷的事件監聽方法。
（2）第二種事件監聽方法bind()，已被jQuery 3.0棄用。自jQuery 1.7以來被on()方法（即第三種事件監聽方法）所取代，雖然在這裡也能使用且不報錯，而且此方法之前比較常見，但是不鼓勵使用它。
（3）第三種事件監聽方法on()，從jQuery 1.7開始，所有的事件繫結方法最後都是呼叫on() 方法來實現的，使用on() 方法實現事件監聽會更快、更具一致性。
（4）第四種和第五種方法，監聽的是 body 上所有 button 元素的 click 事件。DOM 樹裡更高層的一個元素監聽發生在它的 children 元素上的事件，這個過程叫作事件委託（event delegation）。感興趣的讀者可以檢視官方幫助文件。