jquery的事件委托

事件發(fā)生時(shí)是會(huì)發(fā)生以上的步驟/

而事件委托是 委托給他的父級(jí)來觸發(fā)來達(dá)到的效果/
??！如果好多個(gè)動(dòng)態(tài)元素都用同一個(gè)父元素來做事件代理，那么后面的事件會(huì)覆蓋掉前面父元素代理的事件。

動(dòng)態(tài)生成的元素要通過事件委托來處理，官方建議用on把事件委托在body上。 要綁定在 class 上的話，你需要在動(dòng)態(tài)增加后重寫綁定。

原因嘛，似乎是因?yàn)閷?shí)際上是個(gè)數(shù)組，在你沒有動(dòng)態(tài)生成的元素之前，該數(shù)組實(shí)際上在執(zhí)行該條JS語句的時(shí)候就已經(jīng)完成了。（個(gè)人理解。）

只有第一個(gè)和最后一個(gè)有用, 中間那個(gè)其實(shí)并沒有什么用.
用 on來添加事件就是事件委托, 意思就是 :

點(diǎn)擊事件綁定在body 和 delete-monitor1上, 等你點(diǎn)擊的時(shí)候去判斷你點(diǎn)擊的元素 id === button 的話, 就執(zhí)行下面的函數(shù). 所以delete-monitor1是不能動(dòng)態(tài)加載的, 但是他的子元素可以, 而body肯定是在的. 所以能成功.

但是中間那種, 我一進(jìn)頁面, 先去找 delete-monitor的子元素 button, 給每個(gè)button綁定事件. 但是你的 button是動(dòng)態(tài)加載的,剛進(jìn)頁面的時(shí)候是不存在的, 所以沒有綁定成功.

我猜你的 delete-monitor button 是 delete-monitor1 的子元素, 所以第一個(gè)事件綁定影響到了第二個(gè).

委托就像送快遞。你可能不在家，委托門衛(wèi)接收，再給你。 不然快遞到時(shí)你不在家怎么辦？
比較形象，但是不太對(duì).
不知道你明白對(duì)象不，事件綁定在對(duì)象上，按鈕就是一個(gè)對(duì)象，對(duì)象被刪除又重新創(chuàng)建，雖然長得一樣，但是綁定事件沒了。

對(duì)于jQuery1.7版本之前，動(dòng)態(tài)添加的元素綁定事件可以用 live，之后版本，使用 on來綁定，直接給button綁定click事件是不起作用的。

還可以使用addEventListener()來實(shí)現(xiàn)事件委托，達(dá)到對(duì)動(dòng)態(tài)創(chuàng)建的元素綁定事件的效果

是時(shí)候展現(xiàn)一波真正的技術(shù)了：委托

$(document).click(function(e){
    e=e||window.event;
    var target=e.target||e.srcElement;
    //這個(gè)target就是鼠標(biāo)點(diǎn)擊document點(diǎn)擊后拿到的節(jié)點(diǎn)，$(target)
    console.log(target,target.nodeName);
});

//請(qǐng)把這一段代碼 放入控制臺(tái) 執(zhí)行，在頁面上點(diǎn)擊任意節(jié)點(diǎn)，看輸出的信息，你應(yīng)該就明白了。