JavaScript 事件冒泡與事件委託

時間 2019-11-10

原文原文鏈接

事件冒泡

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

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <div id="myDiv"></div>
    </body>
</html>

若是點擊頁面中的 <div> 元素，那麼這個 chick 事件就會按照以下順序傳播：dom

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

事件委託

又稱事件代理。對「事件處理程序過多」問題的解決方案就是事件委託。事件委託利用了事件冒泡，只指定一個父類事件處理程序，就能夠管理某一類型的全部子類元素事件。代理

<ul id="myList">
    <li id="goSth"></li>
    <li id="doSth"></li>
    <li id="sayHi"></li>
</ul>

三個<li> 被單擊，按照傳統方式，會給他們單獨添加事件：code

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

點擊事件很少的狀況下還好，如果全部元素都採用這樣的方式，結果就會有數不清的代碼用於添加事件處理。就比如一萬我的全擠到公司前臺去拿快遞，那場面，蔚爲壯觀啊！可是把快遞放到前臺，前臺接收，而後分批次派送，就會舒服不少：htm

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 的事件操做，佔用更少的內存，這大概是事件委託的精髓所在。對象

全部用到按鈕的事件（多數鼠標和鍵盤事件）都適合採用事件委託。blog