jQuery基礎事件繫結
學習要點：
1.繫結事件
2.簡寫事件
3.複合事件
JavaScript有一個非常重要的功能，就是事件驅動。當頁面完全載入後，使用者通過滑鼠 或鍵盤觸發頁面中繫結事件的元素即可觸發。jQuery為開發者更有效率的編寫事件行為，封 裝了大量有益的事件方法供我們使用。
一．繫結事件
在 JavaScript 課程的學習中，我們掌握了很多使用的事件，常用的事件有：click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、change、select、submit、keydown、keypress、keyup、blur、focus、load、resize、scroll、error。那麼，還有更多的事件可以參考 手冊中的事件部分。
jQuery 通過.bind()方法來為元素繫結這些事件。可以傳遞三個引數：bind(type, [data], fn)， type 表示一個或多個型別的事件名字串；[data]是可選的，作為 event.data 屬性值傳遞一個 額外的資料，這個資料是一個字串、一個數字、一個數組或一個物件；fn 表示繫結到指 定元素的處理函式。
//使用點選事件
$('input').bind('click', function () { //點選按鈕後執行匿名函式
alert('點選！');
});
//普通處理函式
$('input').bind('click', fn); //執行普通函式式無須圓括號
function fn() {
alert('點選！');
}
//可以同時繫結多個事件
$('input').bind('mouseout mouseover', function () { //移入和移出分別執行一次
$('div').html(function (index, value) {
return value + '1';
});
});
//通過物件鍵值對繫結多個引數
$('input').bind({ //傳遞一個物件
'mouseout' : function () { //事件名的引號可以省略
alert('移出');
},
'mouseover' : function () {
alert('移入');
}
});
//使用 unbind 刪除繫結的事件
$('input').unbind(); //刪除所有當前元素的事件
//使用 unbind 引數刪除指定型別事件
$('input').unbind('click'); //刪除當前元素的 click 事件
//使用 unbind 引數刪除指定處理函式的事件
function fn1() {
alert('點選 1');
}
function fn2() {
alert('點選 2');
}
$('input').bind('click', fn1);
$('input').bind('click', fn2);
$('input').unbind('click', fn1); //只刪除 fn1 處理函式的事件 二．簡寫事件
為了使開發者更加方便的繫結事件，jQuery 封裝了常用的事件以便節約更多的程式碼。我 們稱它為簡寫事件。
簡寫事件繫結方法
|
方法名 |
觸發條件 |
描述 |
|
click(fn) |
滑鼠 |
觸發每一個匹配元素的 click(單擊)事件 |
|
dblclick(fn) |
滑鼠 |
觸發每一個匹配元素的 dblclick(雙擊)事件 |
|
mousedown(fn) |
滑鼠 |
觸發每一個匹配元素的 mousedown(點選後)事件 |
|
mouseup(fn) |
滑鼠 |
觸發每一個匹配元素的 mouseup(點選彈起)事件 |
|
mouseover(fn) |
滑鼠 |
觸發每一個匹配元素的 mouseover(滑鼠移入)事件 |
|
mouseout(fn) |
滑鼠 |
觸發每一個匹配元素的 mouseout(滑鼠移出)事件 |
|
mousemove(fn) |
滑鼠 |
觸發每一個匹配元素的 mousemove(滑鼠移動)事件 |
|
mouseenter(fn) |
滑鼠 |
觸發每一個匹配元素的 mouseenter(滑鼠穿過)事件 |
|
mouseleave(fn) |
滑鼠 |
觸發每一個匹配元素的 mouseleave(滑鼠穿出)事件 |
|
keydown(fn) |
鍵盤 |
觸發每一個匹配元素的 keydown(鍵盤按下)事件 |
|
keyup(fn) |
鍵盤 |
觸發每一個匹配元素的 keyup(鍵盤按下彈起)事件 |
|
keypress(fn) |
鍵盤 |
觸發每一個匹配元素的 keypress(鍵盤按下)事件 |
|
unload(fn) |
文件 |
當解除安裝本頁面時繫結一個要執行的函式 |
|
resize(fn) |
文件 |
觸發每一個匹配元素的 resize(文件改變大小)事件 |
|
scroll(fn) |
文件 |
觸發每一個匹配元素的 scroll(滾動條拖動)事件 |
|
focus(fn) |
表單 |
觸發每一個匹配元素的 focus(焦點啟用)事件 |
|
blur(fn) |
表單 |
觸發每一個匹配元素的 blur(焦點丟失)事件 |
|
focusin(fn) |
表單 |
觸發每一個匹配元素的 focusin(焦點啟用)事件 |
|
focusout(fn) |
表單 |
觸發每一個匹配元素的 focusout(焦點丟失)事件 |
|
select(fn) |
表單 |
觸發每一個匹配元素的 select(文字選定)事件 |
|
change(fn) |
表單 |
觸發每一個匹配元素的 change(值改變)事件 |
|
submit(fn) |
表單 |
觸發每一個匹配元素的 submit(表單提交)事件 |
注意：這裡封裝的大部分方法都比較好理解，我們沒必要一一演示確認，重點看幾個需
要注意區分的簡寫方法。
.mouseover()和.mouseout()表示滑鼠移入和移出的時候觸發。那麼 jQuery 還封裝了另外 一組：.mouseenter()和.mouseleave()表示滑鼠穿過和穿出的時候觸發。那麼這兩組本質上有 什麼區別呢？手冊上的說明是：.mouseenter() 和.mouseleave()這組穿過子元素不會觸發， 而.mouseover()和.mouseout()則會觸發。
//HTML 頁面設定
<div style="width:200px;height:200px;background:green;">
<p style="width:100px;height:100px;background:red;"></p>
</div>
<strong></strong>
//mouseover 移入
$('div').mouseover(function () { //移入 div 會觸發，移入 p 再觸發
$('strong').html(function (index, value) {
return value+'1';
});
});
//mouseenter 穿過
$('div').mouseenter(function () { //穿過 div 或者 p
$('strong').html(function (index, value) { //在這個區域只觸發一次
return value+'1';
});
});
//mouseout 移出
$('div').mouseout(function () { //移出 p 會觸發，移出 div 再觸發
$('strong').html(function (index, value) {
return value+'1';
});
});
//mouseleave 穿出
$('div').mouseleave(function () { //移出整個 div 區域觸發一次
$('strong').html(function (index, value) {
return value+'1';
});
});
.keydown()、.keyup()返回的是鍵碼，而.keypress 返回的是字元編碼。
$('input').keydown(function (e) {
alert(e.keyCode); //按下 a 返回 65
});
$('input').keypress(function (e) {
alert(e.charCode); //按下 a 返回 97
});
注意：e.keyCode 和 e.charCode 在兩種事件互換也會產生不同的效果，除了字元還有一 些非字元鍵的區別。更多詳情可以瞭解 JavaScript 事件處理那章。
.focus()和.blur()分別表示游標啟用和丟失，事件觸發時機是當前元素。而.focusin()
和.focusout()也表示游標啟用和丟失，但事件觸發時機可以是子元素。
//HTML 部分
<div style="width:200px;height:200px;background:red;">
<input type="text" value="" />
</div>
<strong></strong>
//focus 游標啟用
$('input').focus(function () { //當前元素觸發
$('strong').html('123');
});
//focusin 游標啟用
$('div').focusin(function () { //繫結的是 div 元素，子類 input 觸發
$('strong').html('123');
});
注意：.blur()和.focusout()表示游標丟失，和啟用類似，一個必須當前元素觸發，一個可 以是子元素觸發。
三．複合事件
jQuery 提供了許多最常用的事件效果，組合一些功能實現了一些複合事件，比如切換功 能、智慧載入等。
複合事件
|
方法名 |
描述 |
|
ready(fn) |
當 DOM 載入完畢觸發事件 |
|
hover([fn1,]fn2) |
當滑鼠移入觸發第一個 fn1，移出觸發 fn2 |
|
toggle(fn1,fn2[,fn3..]) |
已廢棄，當滑鼠點選觸發 fn1,再點選觸發 fn2... |
//背景移入移出切換效果
$('div').hover(function () {
$(this).css('background', 'black'); //mouseenter 效果
}, function () {
$(this).css('background', 'red'); //mouseleave 效果，可省略
});
注意：.hover()方法是結合了.mouseenter()方法和.mouseleva()方法，並非.mouseover()
和.mouseout()方法。
.toggle()這個方法比較特殊，這個方法有兩層含義，第一層含義就是已經被 1.8 版廢用、
1.9 版刪除掉的用法，也就是點選切換複合事件的用法。第二層函式將會在動畫那章講解到。 既然廢棄掉了，就不應該使用。被刪除的原因是：以減少混亂和提高潛在的模組化程度。
但你又非常想用這個方法，並且不想自己編寫類似的功能，可以下載 jquery-migrate.js
檔案，來向下相容已被刪除掉的方法。
//背景點選切換效果(1.9 版刪除掉了)
<script type="text/javascript" src="jquery-migrate-1.2.1.js"></script>
$('div').toggle(function () { //第一次點選切換
$(this).css('background', 'black');
}, function () { //第二次點選切換
$(this).css('background', 'blue');
}, function () { //第三次點選切換
$(this).css('background', 'red');
});
注意：由於官方已經刪除掉這個方法，所以也是不推薦使用的，如果在不基於向下相容 的外掛 JS。我們可以自己實現這個功能。
var flag = 1; //計數器
$('div').click(function () {
if (flag == 1) { //第一次點選
$(this).css('background', 'black');
flag = 2;
} else if (flag == 2) { //第二次點選
$(this).css('background', 'blue');
flag = 3
} else if (flag == 3) { //第三次點選
$(this).css('background', 'red');
flag = 1
}
})；