因為JavaScript在浏覽器中以單線程模式運行，頁面加載後，一旦頁面上所有的JavaScript代碼被執行完後，就只能依賴觸發事件來執行JavaScript代碼。
浏覽器在接收到用戶的鼠標或鍵盤輸入後，會自動在對應的DOM節點上觸發相應的事件。如果該節點已經綁定了對應的JavaScript處理函數，該函數就會自動調用。
由於不同的浏覽器綁定事件的代碼都不太一樣，所以用jQuery來寫代碼，就屏蔽了不同浏覽器的差異，我們總是編寫相同的代碼。
舉個例子，假設要在用戶點擊了超鏈接時彈出提示框，我們用jQuery這樣綁定一個click事件：
/* HTML:
*
* <a id="test-link" href="#0" rel="external nofollow" >點我試試</a>
*
*/
// 獲取超鏈接的jQuery對象:
var a = $('#test-link');
a.on('click', function () {
alert('Hello!');
});
on方法用來綁定一個事件，我們需要傳入事件名稱和對應的處理函數。
另一種更簡化的寫法是直接調用click()方法：
a.click(function () {
alert('Hello!');
});
兩者完全等價。我們通常用後面的寫法。
jQuery能夠綁定的事件主要包括：
鼠標事件
click: 鼠標單擊時觸發； dblclick：鼠標雙擊時觸發； mouseenter：鼠標進入時觸發； mouseleave：鼠標移出時觸發； mousemove：鼠標在DOM內部移動時觸發； hover：鼠標進入和退出時觸發兩個函數，相當於mouseenter加上mouseleave。
鍵盤事件
鍵盤事件僅作用在當前焦點的DOM上，通常是<input>和<textarea>。
keydown：鍵盤按下時觸發； keyup：鍵盤松開時觸發； keypress：按一次鍵後觸發。
其他事件
focus：當DOM獲得焦點時觸發； blur：當DOM失去焦點時觸發； change：當<input>、<select>或<textarea>的內容改變時觸發； submit：當<form>提交時觸發； ready：當頁面被載入並且DOM樹完成初始化後觸發。
其中，ready僅作用於document對象。由於ready事件在DOM完成初始化後觸發，且只觸發一次，所以非常適合用來寫其他的初始化代碼。假設我們想給一個<form>表單綁定submit事件，下面的代碼沒有預期的效果：
<html>
<head>
<script>
// 代碼有誤:
$('#testForm).on('submit', function () {
alert('submit!');
});
</script>
</head>
<body>
<form id="testForm">
...
</form>
</body>
因為JavaScript在此執行的時候，<form>尚未載入浏覽器，所以$('#testForm)返回[]，並沒有綁定事件到任何DOM上。
所以我們自己的初始化代碼必須放到document對象的ready事件中，保證DOM已完成初始化：
<html>
<head>
<script>
$(document).on('ready', function () {
$('#testForm).on('submit', function () {
alert('submit!');
});
});
</script>
</head>
<body>
<form id="testForm">
...
</form>
</body>
這樣寫就沒有問題了。因為相關代碼會在DOM樹初始化後再執行。
由於ready事件使用非常普遍，所以可以這樣簡化：
$(document).ready(function () {
// on('submit', function)也可以簡化:
$('#testForm).submit(function () {
alert('submit!');
});
});
甚至還可以再簡化為：
$(function () {
// init...
});
上面的這種寫法最為常見。如果你遇到$(function () {...})的形式，牢記這是document對象的ready事件處理函數。
完全可以反復綁定事件處理函數，它們會依次執行：
$(function () {
console.log('init A...');
});
$(function () {
console.log('init B...');
});
$(function () {
console.log('init C...');
});
事件參數
有些事件，如mousemove和keypress，我們需要獲取鼠標位置和按鍵的值，否則監聽這些事件就沒什麼意義了。所有事件都會傳入Event對象作為參數，可以從Event對象上獲取到更多的信息：
$(function () {
$('#testMouseMoveDiv').mousemove(function (e) {
$('#testMouseMoveSpan').text('pageX = ' + e.pageX + ', pageY = ' + e.pageY);
});
});
取消綁定
一個已被綁定的事件可以解除綁定，通過off('click', function)實現：
function hello() {
alert('hello!');
}
a.click(hello); // 綁定事件
// 10秒鐘後解除綁定:
setTimeout(function () {
a.off('click', hello);
}, 10000);
需要特別注意的是，下面這種寫法是無效的：
// 綁定事件:
a.click(function () {
alert('hello!');
});
// 解除綁定:
a.off('click', function () {
alert('hello!');
});
這是因為兩個匿名函數雖然長得一模一樣，但是它們是兩個不同的函數對象，off('click', function () {...})無法移除已綁定的第一個匿名函數。
為了實現移除效果，可以使用off('click')一次性移除已綁定的click事件的所有處理函數。
同理，無參數調用off()一次性移除已綁定的所有類型的事件處理函數。
事件觸發條件
一個需要注意的問題是，事件的觸發總是由用戶操作引發的。例如，我們監控文本框的內容改動：
var input = $('#test-input');
input.change(function () {
console.log('changed...');
});
當用戶在文本框中輸入時，就會觸發change事件。但是，如果用JavaScript代碼去改動文本框的值，將不會觸發change事件：
var input = $('#test-input');
input.val('change it!'); // 無法觸發change事件
有些時候，我們希望用代碼觸發change事件，可以直接調用無參數的change()方法來觸發該事件：
var input = $('#test-input');
input.val('change it!');
input.change(); // 觸發change事件
input.change()相當於input.trigger('change')，它是trigger()方法的簡寫。
為什麼我們希望手動觸發一個事件呢？如果不這麼做，很多時候，我們就得寫兩份一模一樣的代碼。
浏覽器安全限制
在浏覽器中，有些JavaScript代碼只有在用戶觸發下才能執行，例如，window.open()函數：
// 無法彈出新窗口，將被浏覽器屏蔽:
$(function () {
window.open('/');
});
這些“敏感代碼”只能由用戶操作來觸發：
var button1 = $('#testPopupButton1');
var button2 = $('#testPopupButton2');
function popupTestWindow() {
window.open('/');
}
button1.click(function () {
popupTestWindow();
});
button2.click(function () {
// 不立刻執行popupTestWindow()，100毫秒後執行:
setTimeout(popupTestWindow, 100);
});
當用戶點擊button1時，click事件被觸發，由於popupTestWindow()在click事件處理函數內執行，這是浏覽器允許的，而button2的click事件並未立刻執行popupTestWindow()，延遲執行的popupTestWindow()將被浏覽器攔截。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。