溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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添加點擊事件，可以通過循環綁定，或者是采用事件委托方式，如下：
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參數，使用事件委托
$("table").on("click", "td", function(){
console.log(e.target.tagName+" ");
});或者：
$(document).on("click", "td", function(){
console.log(e.target.tagName+" ");
});此時事件冒泡到document或者table時會監測是否是td selector，匹配時會觸發事件
看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
