亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

【筆記】事件委托（即事件代理）知識(shí)點(diǎn)

forrest23 / 772人閱讀

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

事件委托原理

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

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

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

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


    
    
  • 111
    • 
    
  • 222
    • 
    
  • 333
    • 
    
  • 444
    • 
    
  • 555
    • 




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

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/83606.html

相關(guān)文章

  • javascript事件基礎(chǔ)知識(shí)

    摘要：可選，布爾值，指定事件是否在捕獲或冒泡階段執(zhí)行，默認(rèn)冒泡。適用范圍參數(shù)介紹必須，字符串，事件名稱。必須，指定事件觸發(fā)時(shí)執(zhí)行的函數(shù)。事件冒泡事件冒泡與事件捕獲恰恰相反，事件冒泡順序是由內(nèi)到外進(jìn)行事件傳播，直到根節(jié)點(diǎn)。 什么是事件 javascript與HTML之間交互就是通過(guò)事件實(shí)現(xiàn)的，事件就是文檔或?yàn)g覽器窗口中發(fā)生的一些特定的交互瞬間。事件在瀏覽器中是以對(duì)象的形式存在的，即event，...

    ad6623 評(píng)論0 收藏0

  • 讀書(shū)筆記(05) - 事件 - JavaScript高級(jí)程序設(shè)計(jì)

    摘要：而事件分為個(gè)級(jí)別級(jí)事件處理程序，級(jí)事件處理程序和級(jí)事件處理程序。級(jí)中沒(méi)有規(guī)范事件的相關(guān)內(nèi)容，所以沒(méi)有級(jí)事件處理。 showImg(https://segmentfault.com/img/bVburYR?w=499&h=400); HTML依托于JavaScript來(lái)實(shí)現(xiàn)用戶與WEB網(wǎng)頁(yè)之間的動(dòng)態(tài)交互，接收用戶操作并做出相應(yīng)的反饋，而事件在此間則充當(dāng)橋梁的重要角色。 日常開(kāi)發(fā)中，經(jīng)常會(huì)...

    tinylcy 評(píng)論0 收藏0

  • js 事件委托 事件代理

    摘要：事件委托事件代理高級(jí)程序設(shè)計(jì)上解釋事件委托就是利用事件冒泡，只指定一個(gè)事件處理程序，就可以管理某一類(lèi)型的所有事件。事件委托原理事件委托是利用事件的冒泡原理來(lái)實(shí)現(xiàn)的，事件冒泡就是事件從最深的節(jié)點(diǎn)開(kāi)始，然后逐級(jí)向上傳播事件。 js 事件委托 事件代理 JavaScript高級(jí)程序設(shè)計(jì)上解釋：事件委托就是利用事件冒泡，只指定一個(gè)事件處理程序，就可以管理某一類(lèi)型的所有事件。 通過(guò)例子類(lèi)比： 有...

    widuu 評(píng)論0 收藏0

  • jQuery入門(mén)筆記之（三）事件詳解

    摘要：可以傳遞三個(gè)參數(shù)表示一個(gè)或多個(gè)事件類(lèi)型，比如。表示綁定到指定元素的處理函數(shù)。我們稱它為簡(jiǎn)寫(xiě)事件。必須在中，并且使用作為事件觸發(fā)元素，不然無(wú)效。和表示鼠標(biāo)移入和移出的時(shí)候觸發(fā)。按下返回按下返回和分別表示光標(biāo)激活和丟失，事件觸發(fā)時(shí)機(jī)是當(dāng)前元素。 轉(zhuǎn)自個(gè)人博客 在JavaScript 有一個(gè)非常重要的功能，就是事件驅(qū)動(dòng)。如果你的網(wǎng)頁(yè)需要與用戶進(jìn)行交互的話，就不可能不用到事件。它在頁(yè)面完全加...

    GitCafe 評(píng)論0 收藏0

  • Backbone.js學(xué)習(xí)筆記（一）

    摘要：它通過(guò)數(shù)據(jù)模型進(jìn)行鍵值綁定及事件處理，通過(guò)模型集合器提供一套豐富的用于枚舉功能，通過(guò)視圖來(lái)進(jìn)行事件處理及與現(xiàn)有的通過(guò)接口進(jìn)行交互。 本人兼職前端付費(fèi)技術(shù)顧問(wèn)，如需幫助請(qǐng)加本人微信hawx1993或QQ345823102，非誠(chéng)勿擾 1.為初學(xué)前端而不知道怎么做項(xiàng)目的你指導(dǎo) 2.指導(dǎo)并扎實(shí)你的JavaScript基礎(chǔ) 3.幫你準(zhǔn)備面試并提供相關(guān)指導(dǎo)性意見(jiàn) 4.為你的前端之路提供極具建設(shè)性的...

    FrancisSoung 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<