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

forrest23 發布于2019-08-20 17:28 / 735人閱讀

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

事件委托原理

事件委托就是利用事件冒泡原理實現的！

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

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

//需求：鼠標放到li上對應的li背景變灰


    111
    222
    333
    444
    555



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

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

$("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是指向當前事件所綁定的元素，而e.target指向事件執行時鼠標所點擊區域的那個元素
要看事件綁定的元素內部有沒有子元素
如果有子元素的話e.target指向這個子元素，如果沒有，e.target和this都指向事件所綁定的元素。
e.target事件委托就是事件目標自身不處理事件，而是把處理任務委托給其父元素或者祖先元素，甚至根元素（document）。

云服務器 GPU云服務器委托事件事件委托事件委托c javascript事件委托

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/83606.html

javascript事件基礎知識

摘要：可選，布爾值，指定事件是否在捕獲或冒泡階段執行，默認冒泡。適用范圍參數介紹必須，字符串，事件名稱。必須，指定事件觸發時執行的函數。事件冒泡事件冒泡與事件捕獲恰恰相反，事件冒泡順序是由內到外進行事件傳播，直到根節點。什么是事件 javascript與HTML之間交互就是通過事件實現的，事件就是文檔或瀏覽器窗口中發生的一些特定的交互瞬間。事件在瀏覽器中是以對象的形式存在的，即event，...

ad6623 2019-08-26 13:36 評論0 收藏0
讀書筆記(05) - 事件 - JavaScript高級程序設計

摘要：而事件分為個級別級事件處理程序，級事件處理程序和級事件處理程序。級中沒有規范事件的相關內容，所以沒有級事件處理。 showImg(https://segmentfault.com/img/bVburYR?w=499&h=400); HTML依托于JavaScript來實現用戶與WEB網頁之間的動態交互，接收用戶操作并做出相應的反饋，而事件在此間則充當橋梁的重要角色。日常開發中，經常會...

tinylcy 2019-08-23 13:58 評論0 收藏0
js 事件委托事件代理

摘要：事件委托事件代理高級程序設計上解釋事件委托就是利用事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。事件委托原理事件委托是利用事件的冒泡原理來實現的，事件冒泡就是事件從最深的節點開始，然后逐級向上傳播事件。 js 事件委托事件代理 JavaScript高級程序設計上解釋：事件委托就是利用事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。通過例子類比：有...

widuu 2019-08-23 14:44 評論0 收藏0
jQuery入門筆記之（三）事件詳解

摘要：可以傳遞三個參數表示一個或多個事件類型，比如。表示綁定到指定元素的處理函數。我們稱它為簡寫事件。必須在中，并且使用作為事件觸發元素，不然無效。和表示鼠標移入和移出的時候觸發。按下返回按下返回和分別表示光標激活和丟失，事件觸發時機是當前元素。轉自個人博客在JavaScript 有一個非常重要的功能，就是事件驅動。如果你的網頁需要與用戶進行交互的話，就不可能不用到事件。它在頁面完全加...

GitCafe 2019-08-19 17:17 評論0 收藏0
Backbone.js學習筆記（一）

摘要：它通過數據模型進行鍵值綁定及事件處理，通過模型集合器提供一套豐富的用于枚舉功能，通過視圖來進行事件處理及與現有的通過接口進行交互。本人兼職前端付費技術顧問，如需幫助請加本人微信hawx1993或QQ345823102，非誠勿擾 1.為初學前端而不知道怎么做項目的你指導 2.指導并扎實你的JavaScript基礎 3.幫你準備面試并提供相關指導性意見 4.為你的前端之路提供極具建設性的...

FrancisSoung 2019-08-21 10:21 評論0 收藏0