jQuery事件委托代碼實踐詳解

更新時間：2019年06月21日 08:25:16 作者：wishyouhappy

這篇文章主要介紹了jQuery事件委托代碼實踐詳解，事件委托是利用事件冒泡，只指定一個事件處理程序來管理某一類型的所有事件。,需要的朋友可以參考下

javascript的事件模型，采用"冒泡"模式，子元素的事件會逐級向上"冒泡"，成為父元素的事件。

在需要為較多的元素綁定事件時應該使用事件委托 event delegation

javascript事件傳播

html如下：

<body>
<table>
<tr><td id="targetTd"></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
</body>

添加腳本：

targetTd.onclick = function (event) {
console.log("Td is clicked");
};
document.body.onclick = function (event) {
console.log("Body is clicked");
};

點擊td targetTd,結果如下：

Td is clicked
Body is clicked

使用stopPropagation可以阻止事件的傳播(ie下使用cancelBubble)

eg:

targetTd.onclick = function (event) {
console.log("Td is clicked");
event.stopPropagation();
};
document.body.onclick = function (event) {
console.log("Body is clicked");
};

點擊td targetTd,結果如下：

Td is clicked

js事件委托

如果我們想給上面的table中所有的td添加點擊事件，可以通過循環(huán)綁定，或者是采用事件委托方式，如下：

document.body.onclick = function (event) {
if(event.target.tagName === "TD"){
console.log(event.target.tagName+" is clicked");
}
};

jQuery事件委托

jquery 事件綁定 on 方法定義如下：

.on( events [, selector ] [, data ], handler(eventObject) )

取消事件的綁定可以使用off

$(document).off("click", "td");

給td綁定點擊事件可以使用：

$("td").on("click", function(e){
console.log(e.target.tagName+" is clicked");
});

加入selector參數(shù)，使用事件委托

$("table").on("click", "td", function(){
console.log(e.target.tagName+" ");
});

或者：

$(document).on("click", "td", function(){
console.log(e.target.tagName+" ");
});

此時事件冒泡到document或者table時會監(jiān)測是否是td selector，匹配時會觸發(fā)事件

您可能感興趣的文章:

jQuery中[attribute^=value]選擇器用法實例
這篇文章主要介紹了jQuery中[attribute^=value]選擇器用法,實例分析了[attribute^=value]選擇器的功能、定義及匹配以某些值開始的元素的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2014-12-12
文本有關的樣式和jQuery求對象的高寬問題分別說明
有關文處理本有關的問題WEB開發(fā)經常會用到，這里結合使用情況總結一下，同時還有jQuery求對象的高度問題，下面為大家本別講解下
2013-08-08
jquery中文亂碼的多種解決方法
jquery中文亂碼的多種解決方法，需要的朋友可以參考一下
2013-06-06
基于jquery實現(xiàn)鼠標左右拖動滑塊滑動附源碼下載
這篇文章主要介紹了基于jquery實現(xiàn)鼠標左右拖動滑塊滑動附源碼下載的相關資料,需要的朋友可以參考下
2015-12-12
autoPlay 基于jquery的圖片自動播放效果
效果類似這種，自動播放，實質控制層的顯示隱藏。需要的朋友可以參考下。
2011-12-12
jquery.fileEveryWhere.js 一個跨瀏覽器的file顯示插件
大牛ppk都說過，在從多表單控件中，上傳文件控件的樣式是最難以控制的。見文章Styling an input type="file"。本插件也多是參考此文
2011-10-10
jQuery實現(xiàn)ajax回調函數(shù)帶入參數(shù)的方法示例
這篇文章主要介紹了jQuery實現(xiàn)ajax回調函數(shù)帶入參數(shù)的方法,結合實例形式對比分析了jQuery實現(xiàn)ajax回調函數(shù)不帶入參數(shù)與帶入參數(shù)的具體實現(xiàn)技巧,需要的朋友可以參考下
2018-06-06
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax輔助方法
我們都知道在AjaxPro的方法AjaxPro.Utility.RegisterTypeForAjax(typeof(所在類的類名));會將標記有[Ajax.AjaxMethod]方法注冊在客戶端。
2011-09-09
基于Bootstrap和jQuery構建前端分頁工具實例代碼
本文給大家介紹基于Bootstrap和jQuery構建前端分頁工具實例代碼，包括前端分頁的優(yōu)缺點和解決辦法，對jquery bootstrap分頁知識感興趣的朋友一起通過本文學習吧
2016-11-11
jquery mobile頁面跳轉后樣式丟失js失效的解決方法
用ajax跳轉的時候，目標頁的css以及js都失效，這是由于page之外的代碼都不會加載，所以導致在page外的js和css都失效，解決方法如下
2014-09-09