快捷導(dǎo)航

詳解jQuery事件

更新時間：2017年01月13日 16:52:21 作者：by.Genesis

本文主要介紹了jQuery事件的相關(guān)知識。具有一定的參考價值，下面跟著小編一起來看下吧

事件是 Web 應(yīng)用中不可或缺的一個東西，用戶在應(yīng)用中執(zhí)行一個操作的時候，比如鼠標(biāo)單擊時要觸發(fā)執(zhí)行一些事情，就可以給該事件綁定一個事件處理程序(event handler)。使用 jQuery 的 .on() 方法可以為選中的元素綁定任意的 DOM 事件，并添加事件處理程序。假設(shè)有如下 HTML 結(jié)構(gòu)：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
</head>
<body>
 <button id="example" type="button">Click me!</button>
 <script src="http://code.jquery.com/jquery-1.11.2.js"></script>
 <script>
 // code here
 </script>
</body>
</html>

在 <script> 元素內(nèi)添加如下代碼，其中，事件名稱是 .on() 方法的第一個參數(shù)，事件處理程序的回調(diào)函數(shù)作為第二個參數(shù)：

$('#example').on('click', function(e) {
 alert('Clicked!');
});

這樣當(dāng)該按鈕元素觸發(fā)鼠標(biāo)單擊(click)事件的時候就會執(zhí)行綁定的事件處理程序，彈出一個對話框！回調(diào)函數(shù)的第一個參數(shù) e 為事件對象，通過該對象可以得到很多事件相關(guān)的信息，比如事件類型，事件發(fā)生的坐標(biāo)點等以及一些事件方法?；卣{(diào)函數(shù)除了可以像這樣使用一個匿名函數(shù)，也可以使用一個變量標(biāo)識的函數(shù)引用：

$('#example').on('click', clickHandler);

同時綁定多個事件

另外，jQuery 還支持使用空格分隔多個事件名稱來同時綁定多個事件，比如 mouseenter mouseleave，同時給元素綁定鼠標(biāo)移入和鼠標(biāo)移出事件?？梢酝ㄟ^事件對象的 type 屬性來判斷發(fā)生的是哪個事件：

$('#example').on('mouseenter mouseleave', function(e) {
 if (e.type === 'mouseenter') {
 // mouseenter
 } else {
 // mouseleave
 }
});

除了上面這種方法外，還可以傳入一個鍵值對來綁定多個事件：

$('#example').on({
 mouseleave: function() {
 // mouseleave
 },
 mouseenter: function() {
 // mouseenter
 }
});

事件上下文

同時給多個元素綁定事件處理程序的時候可以使用事件執(zhí)行的上下文來簡化代碼：

$('li').on('click', function() {
 var $this = $(this);
 $this.addClass('active');
});

上下文關(guān)鍵字 this 引用的是原生 DOM 元素，所以如果要使用 jQuery 的方法需要先包裝成 jQuery 對象。

事件委托

事件會經(jīng)過一個捕捉和冒泡的過程，為了兼容，jQuery 只使用了事件的冒泡，即目標(biāo)元素觸發(fā)事件后會逐級冒泡直到頂級元素節(jié)點。利用事件的冒泡可以將目標(biāo)元素的事件處理程序綁定到其祖先元素上統(tǒng)一處理，可以給 .on() 方法傳入一個可選的選擇器字符串作為第二個參數(shù)：

$(document).on('click', '#example', clickHandler);

此時表示將 id="example" 的元素的鼠標(biāo)單擊事件委托綁定到了 document 元素上，當(dāng)目標(biāo)元素（即 id="example" 的元素）觸發(fā)鼠標(biāo)單擊事件的時候，該事件就會冒泡到 document 元素上，從而觸發(fā)事件處理程序。使用事件委托的好處是如果頁面上有很多列表，每個列表都去綁定一個鼠標(biāo)單擊事件，那么就會有很多事件處理程序，會對性能造成影響。利用事件冒泡的原則，將事件處理程序綁定到目標(biāo)元素的父元素或者祖先元素上，可以明顯地減少事件處理程序的數(shù)量，改善性能：

$('ul').on('click', 'li', clickHandler);

使用事件委托另外一個好處是那些動態(tài)添加的 <li> 元素也會具有事件處理程序。個人比較侵向于將事件都委托到 document 元素上方便管理，而且也不用等到 DOM 準(zhǔn)備就緒：

$(document)
 .on('click', 'selector-1', clickHandler)
 .on('focusin', 'selector-2', focusHandler);

在 IE8 中一些事件比如 submit 或者 change 是不會冒泡的，但是 jQuery 對此做了處理，因此也可以放心使用。像 focus 和 blur 事件則推薦使用相應(yīng)的 focusin 和 focusout 事件來代替。對于 mouseover 和 mouseout 事件，為了避免事件冒泡造成的不良影響，推薦使用 mouseenter 和 mouseleave 來代替。

阻止事件冒泡與默認(rèn)行為

調(diào)用事件對象的 .stopPropagation() 方法可以阻止事件冒泡：

$('#example').on('click', function(e) {
 e.stopPropagation();
});

這樣當(dāng)單擊事件在該元素上發(fā)生的時候就不會冒泡了。jQuery 還有另外一個方法 .stopImmediatePropagation() 調(diào)用后事件冒泡被阻止同時該元素上后面綁定的事件處理程序也不會執(zhí)行了：

$('#example').on('click', function() {
 alert('Clicked-1!'); // 會執(zhí)行
}).on('click', function(e) {
 e.stopImmediatePropagation();
}).on('click', function() {
 alert('Clicked-2!'); // 不會執(zhí)行
});

調(diào)用事件對象的 .preventDefault() 方法可以阻止事件的默認(rèn)行為：

$('#example').on('click', function(e) {
 e.preventDefault();
});

在事件處理程序中直接返回 false 可以同時取消冒泡和阻止默認(rèn)行為：

$('#example').on('click', function() {
 return false;
});

相當(dāng)于同時調(diào)用了事件對象上面的 .stopPropagation() 和 .preventDefault() 方法。如果沒有其它操作，還可以進(jìn)一步簡寫為 $('#example').on('click', false);。

應(yīng)用示例，點擊按鈕顯示彈出層，點擊文檔其它地方隱藏：

$(document)
 .on('click', '#example', popup.show)
 .on('click', popup.hide);

由于事件冒泡，所以該彈出層并不會顯示出來，需要在事件處理程序中阻止事件冒泡：

$(document)
 .on('click', '#example', function(e) {
 e.stopPropagation();
 popup.show();
 }).on('click', popup.hide);

獲取原生事件對象

事件處理程序中引用的事件對象實際上是經(jīng)過 jQuery 包裝過的，有時候需要使用瀏覽器原生的事件對象，要得到瀏覽器原生的事件對象可以通過事件對象的 originalEvent 屬性獲取。例如，使用拖拽事件的時候就會用到原生的事件對象：

$('#example').on('dragstart', function(e) {
 var originalEvent = e.originalEvent;
 originalEvent.dataTransfer.effectAllowed = 'move';
 originalEvent.dataTransfer.setData('text/plain', $(this).text());
 originalEvent.dataTransfer.setData('text/html', $(this).html());
 originalEvent.dataTransfer.setDragImage('/images/drag.png', -10, -10);
});

傳遞數(shù)據(jù)

可以給事件處理程序傳入數(shù)據(jù)，該數(shù)據(jù)保存在事件對象的 data 屬性中：

$('#example').on('click', 1, function(e) {
 console.log(e.data); // 1
});

為了區(qū)別事件代理，傳遞的數(shù)據(jù)貌似不能是一個直接的字符串，不過可以傳入一個對象來代替：

$('#example').on('click', {str: 'xxx'}, function(e) {
 console.log(e.data.str); // xxx
});

自定義事件

除了瀏覽器的標(biāo)準(zhǔn)事件，還可以綁定自定義事件的事件處理程序，其中事件名可以使用任意命名：

$('#example').on('sleep', function() {
 alert('Sleeping!');
});

標(biāo)準(zhǔn)事件的事件處理程序可以通過瀏覽器原生事件去觸發(fā)，而自定義事件的事件處理程序則可以使用 jQuery 的 .trigger() 方法觸發(fā)，使用方式如下，傳入需要觸發(fā)的事件名稱作為參數(shù)：

$('#example').trigger('sleep');

可以通過給 trigger() 方法傳入更多參數(shù)來給事件處理程序傳遞數(shù)據(jù)，數(shù)據(jù)會作為回調(diào)函數(shù)的參數(shù)進(jìn)行傳遞：

$('#example').on('sleep', function(e, time) {
 alert('Sleep at' + time);
});
$('#example').trigger('sleep', '22:00');

應(yīng)用示例，使用自定義事件編寫異步代碼：

$('#example').on('done', doHandler);
function foo() {
 setTimeout(function() {
 // foo 函數(shù)的邏輯比較耗時，所以使用 setTimeout 函數(shù)排隊
 $('#example').trigger('done'); // 執(zhí)行完了，通知一聲
 }, 1000);
}

foo 函數(shù)執(zhí)行完成后，就會觸發(fā)元素的 done 事件，前面綁定的 doHandler 函數(shù)就會開始執(zhí)行。

事件命名空間

無論是瀏覽器標(biāo)準(zhǔn)事件或是自定義事件都可以添加命名空間，添加在事件名稱后面，通過一個 . 號分隔，像這樣 click.widget，也可以給一個事件添加多個命名空間 click.widget.common，使用命名空間可以更有針對性地觸發(fā)或者移除某個特定的事件處理程序。比如一個元素同時綁定了 click.tab 和 click.collapse 兩個點擊事件，當(dāng)使用 .trigger() 方法觸發(fā) click.collapse 事件時會執(zhí)行該事件的事件處理程序，而 click.tab 的事件處理程序則不會執(zhí)行。

移除綁定事件

使用 .off() 方法可以移除綁定的事件處理程序，有下面幾種情況：

不指定任何參數(shù)，移除該元素上綁定的所有事件處理程序。
指定事件名，如 .off('click') 表示移除該元素上綁定的所有單擊事件處理程序。
指定事件處理程序，如 .off('click', clickHandler) 表示僅移除該事件處理程序（是的，匿名函數(shù)不能這樣移除）。
指定事件命名空間，如 .off('.widget') 表示移除該命名空間下所有的事件處理程序（比如綁定的 click.widget 和 change.widget 事件處理程序都會被移除），該方式可以用于移除某個組件綁定的各種事件。
指定事件代理的元素，如 $(document).off('click', '#example')，可以移除為該元素綁定的事件代理處理程序。

一次性事件

使用 .one() 方法綁定的事件處理程序只會觸發(fā)執(zhí)行一次，一次后自動移除：

$('#example').one('click', clickHandler);

事件節(jié)流

瀏覽器中有幾個事件會頻繁觸發(fā)，比如 scroll, resize, mousemove 等，那么給這些事件綁定的事件處理程序也會跟著頻繁地執(zhí)行，導(dǎo)致頁面反應(yīng)遲鈍，要解決這個問題，需要節(jié)流事件，減少事件處理程序執(zhí)行的頻率：

var timer = 0; // 使用一個定時器
$(window).on('scroll', function() {
 if (!timer) {
 timer = setTimeout(function() {
 // Do something
 timer = 0;
 }, 200);
 }
});

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章: