【筆記】事件委托（即事件代理）知識點

forrest23 發(fā)布于2019-08-20 17:28 / 726人閱讀

摘要：事件委托就是事件目標(biāo)自身不處理事件，而是把處理任務(wù)委托給其父元素或者祖先元素，甚至根元素。

事件委托原理

事件委托就是利用事件冒泡原理實現(xiàn)的！

事件冒泡：就是事件從最深節(jié)點開始，然后逐步向上傳播事件；

例：頁面上有一個節(jié)點樹，div > ul > li > a 比如給最里面的a 加一個click事件，那么事件就會一層一層的往外執(zhí)行，執(zhí)行順序 a > li > ul > div, 有這樣一個機制，當(dāng)我們給最外層的div添加點擊事件，那么里面的ul ， li ， a做點擊事件的時候，都會冒泡到最外層的div上，所以都會觸發(fā)，這就是事件委托，委托他們父集代為執(zhí)行事件；

//需求：鼠標(biāo)放到li上對應(yīng)的li背景變灰


    111
    222
    333
    444
    555



//用父集做事件處理，當(dāng)li被點擊時，由于冒泡原理事件就會冒泡到ul上，因此ul上有點擊事件，所以事件就會被觸發(fā);
//Event對象提供了一個屬性叫做target，可以返回事件的目標(biāo)節(jié)點，我們稱之為事件源，
//也就是說，target就可以表示當(dāng)前事件操作的dom，但可能不是真正操作的dom，
//js中存在兼容性問題：標(biāo)準(zhǔn)瀏覽器：event.target，IE瀏覽器：event.srcElement

存在問題：點擊ul本身的時候也是會觸發(fā)的；
如果我們只想讓li觸發(fā)而不想讓ul觸發(fā)，怎么辦？？？
此時只是獲取了當(dāng)前節(jié)點的位置，但并不知道節(jié)點名稱，這里我們用nodeName來獲取具體是什么標(biāo)簽名，這個返回值是一個大寫的，判斷時需要轉(zhuǎn)換為小寫；

$("ul").on("click",function(e){
        if (e.target.nodeName.toLowerCase() == "li") {
             $(e.target).css("background-color","red").siblings().css("background-color","white");
        } else{
             return;
        };
                 
})

補充
this是指向當(dāng)前事件所綁定的元素，而e.target指向事件執(zhí)行時鼠標(biāo)所點擊區(qū)域的那個元素
要看事件綁定的元素內(nèi)部有沒有子元素
如果有子元素的話e.target指向這個子元素，如果沒有，e.target和this都指向事件所綁定的元素。
e.target事件委托就是事件目標(biāo)自身不處理事件，而是把處理任務(wù)委托給其父元素或者祖先元素，甚至根元素（document）。