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]選擇器用法實例](http://img.jbzj.com/images/xgimg/bcimg0.png)
jQuery中[attribute^=value]選擇器用法實例
這篇文章主要介紹了jQuery中[attribute^=value]選擇器用法,實例分析了[attribute^=value]選擇器的功能、定義及匹配以某些值開始的元素的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2014-12-12
有關文處理本有關的問題WEB開發(fā)經(jīng)常會用到，這里結合使用情況總結一下，同時還有jQuery求對象的高度問題，下面為大家本別講解下2013-08-08
jquery中文亂碼的多種解決方法，需要的朋友可以參考一下2013-06-06
基于jquery實現(xiàn)鼠標左右拖動滑塊滑動附源碼下載
這篇文章主要介紹了基于jquery實現(xiàn)鼠標左右拖動滑塊滑動附源碼下載 的相關資料,需要的朋友可以參考下2015-12-12
效果類似這種，自動播放，實質控制層的顯示隱藏。需要的朋友可以參考下。2011-12-12
jquery.fileEveryWhere.js 一個跨瀏覽器的file顯示插件
大牛ppk都說過，在從多表單控件中，上傳文件控件的樣式是最難以控制的。見文章Styling an input type="file"。本插件也多是參考此文2011-10-10
jQuery實現(xiàn)ajax回調函數(shù)帶入?yún)?shù)的方法示例
這篇文章主要介紹了jQuery實現(xiàn)ajax回調函數(shù)帶入?yún)?shù)的方法,結合實例形式對比分析了jQuery實現(xiàn)ajax回調函數(shù)不帶入?yún)?shù)與帶入?yún)?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