JavaScript 事件冒泡與事件委托

用戶83 發布于2019-08-22 17:10 / 2263人閱讀

摘要：事件冒泡的事件流叫做事件冒泡。事件委托又稱事件代理。對事件處理程序過多問題的解決方案就是事件委托。所有用到按鈕的事件多數鼠標和鍵盤事件都適合采用事件委托。

事件冒泡

IE的事件流叫做事件冒泡。顧名思義當事件發生后，事件就開始從里向外傳播，查看下方代碼：


    
        
        Document

如果點擊頁面中的

元素，那么這個 chick 事件就會按照如下順序傳播：

click 事件在直系DOM 樹的每一級節點都會發生（自下而上），直到 document 對象。

事件委托

又稱事件代理。對“事件處理程序過多”問題的解決方案就是事件委托。事件委托利用了事件冒泡，只指定一個父類事件處理程序，就可以管理某一類型的所有子類元素事件。

三個

被單擊，按照傳統方式，會給他們多帶帶添加事件：

    document.getElementById("sayHi").onClick(function(){...})

點擊事件不多的情況下還好，若是所有元素都采用這樣的方式，結果就會有數不清的代碼用于添加事件處理。就好比一萬個人全擠到公司前臺去拿快遞，那場面，蔚為壯觀啊！但是把快遞放到前臺，前臺接收，然后分批次派送，就會舒服很多：

    document.getElementById("myList").onClick(function(ev){
        var e = ev || window.event;
        var target = e.target;
        switch (target.id) {
            case "goSth":
                ...
                break;
            case "doSth":
                ...
                break;
            ...
        }
    })

上面是用事件委托的方式，子元素是帶有事件效果的，我們可以發現，當用事件委托的時候，根本就不需要去遍歷元素的子節點，只需要給父級元素添加事件就好了，子元素點擊，會通過以事件冒泡的方式激活父元素已添加的相同事件，減少了很多 js 對于 dom 的事件操作，占用更少的內存，這大概是事件委托的精髓所在。

所有用到按鈕的事件（多數鼠標和鍵盤事件）都適合采用事件委托。

GPU云服務器云服務器 javascript事件委托委托事件事件委托冒泡事件

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

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

Javascript事件流

摘要：見下圖更直觀在事件流中，事件的目標在捕獲階段不會接受到事件，這意味著在捕獲階段，事件從到后就停止了。下一個階段是目標階段，于是事件在上發生，并在事件處理中被看成是冒泡階段的一部分，然后，冒泡階段發生，事件又傳回。 CONTENTS DOM事件流事件冒泡阻止冒泡事件捕獲事件委托 DOM事件流 1.什么是事件流？事件流所描述的是從頁面中接受事件的順序 2.DOM事件流的三個階...

baiy 2019-08-22 18:48 評論0 收藏0
Javascript事件流

摘要：見下圖更直觀在事件流中，事件的目標在捕獲階段不會接受到事件，這意味著在捕獲階段，事件從到后就停止了。下一個階段是目標階段，于是事件在上發生，并在事件處理中被看成是冒泡階段的一部分，然后，冒泡階段發生，事件又傳回。 CONTENTS DOM事件流事件冒泡阻止冒泡事件捕獲事件委托 DOM事件流 1.什么是事件流？事件流所描述的是從頁面中接受事件的順序 2.DOM事件流的三個階...

luffyZh 2019-08-02 10:57 評論0 收藏0
Javascript事件流

摘要：見下圖更直觀在事件流中，事件的目標在捕獲階段不會接受到事件，這意味著在捕獲階段，事件從到后就停止了。下一個階段是目標階段，于是事件在上發生，并在事件處理中被看成是冒泡階段的一部分，然后，冒泡階段發生，事件又傳回。 CONTENTS DOM事件流事件冒泡阻止冒泡事件捕獲事件委托 DOM事件流 1.什么是事件流？事件流所描述的是從頁面中接受事件的順序 2.DOM事件流的三個階...

pcChao 2019-08-30 15:54 評論0 收藏0
JavaScript 事件詳解

摘要：事件監聽函數標準的事件監聽函數如下上面的示例表示先獲得表示節點的對象，然后在這個對象上面添加了一個事件監聽器，當監聽到事件發生時，則調用回調函數，即在控制臺輸出。 JavaScript 事件解讀 1. 事件基本概念事件是指在文檔或者瀏覽器中發生的一些特定交互瞬間，比如打開某一個網頁，瀏覽器加載完成后會觸發 load 事件，當鼠標懸浮于某一個元素上時會觸發 hover 事件，當鼠標點擊...

Object 2019-08-19 18:12 評論0 收藏0
理解Javascript中的事件綁定與事件委托

摘要：最近在深入實踐中，遇到了一些問題，比如我需要為動態創建的元素綁定事件，那么普通的事件綁定就不行了，于是通過上網查資料了解到事件委托，因此想總結一下中的事件綁定與事件委托。事件冒泡認為事件促發的最深層元素首先接收事件。最近在深入實踐js中，遇到了一些問題，比如我需要為動態創建的DOM元素綁定事件，那么普通的事件綁定就不行了，于是通過上網查資料了解到事件委托，因此想總結一下js中的事件綁...

lewinlee 2019-08-20 10:23 評論0 收藏0