學習要點：

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 

相關推薦