jQuery中怎么實(shí)現(xiàn)事件委托，很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

成都創(chuàng)新互聯(lián)公司長(zhǎng)期為上1000+客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為神農(nóng)架林區(qū)企業(yè)提供專業(yè)的網(wǎng)站設(shè)計(jì)制作、成都做網(wǎng)站，神農(nóng)架林區(qū)網(wǎng)站改版等技術(shù)服務(wù)。擁有10余年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。

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

在需要為較多的元素綁定事件時(shí)應(yīng)該使用事件委托 event delegation

javascript事件傳播

html如下：

添加腳本：

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

點(diǎn)擊td targetTd,結(jié)果如下：

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");
};

點(diǎn)擊td targetTd,結(jié)果如下：

Td is clicked

js事件委托

如果我們想給上面的table中所有的td添加點(diǎn)擊事件，可以通過(guò)循環(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綁定點(diǎn)擊事件可以使用：

$("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+" ");
});

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

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)的支持。

當(dāng)前題目：jQuery中怎么實(shí)現(xiàn)事件委托-創(chuàng)新互聯(lián)
當(dāng)前路徑：http://weahome.cn/article/cecjjd.html