如何理解javascript事件委托

這篇文章主要介紹“如何理解javascript事件委托”，在日常操作中，相信很多人在如何理解javascript事件委托問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”如何理解javascript事件委托”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

在javascript中，事件委托也稱為事件托管或事件代理，就是把目標節點的事件綁定到祖先節點上；它是利用事件冒泡原理，管理某一類型的所有事件，利用父元素來代表子元素的某一類型事件的處理方式。

本教程操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

在 JavaScript 中，事件委托（delegate）也稱為事件托管或事件代理，是利用事件冒泡原理，管理某一類型的所有事件，利用父元素來代表子元素的某一類型事件的處理方式。

這樣做的好處：優化代碼，提升運行性能，真正把 HTML 和 JavaScript 分離，也能防止出現在動態添加或刪除節點過程中注冊的事件丟失的現象。

示例1

下面示例使用一般方法為列表結構中每個列表項目綁定 click 事件，單擊列表項目，將彈出提示對話框，提示當前節點包含的文本信息。但是，當我們為列表框動態添加列表項目之后，新添加的列表項目沒有綁定 click 事件，這與我們的愿望相反。

<button id="btn">添加列表項目</button>
<ul id="list">
    <li>列表項目1</li>
    <li>列表項目2</li>
    <li>列表項目3</li>
</ul>
<script>
    var ul = document.getElementById("list");
    var lis = ul.getElementsByTagName("li");
    for (var i = 0; i < lis.length; i ++) {
        lis[i].addEventListener('cluick', function (e) {
            var e = e || window.event;
            var target = e.target || e.srcElement;
            alert(e.target.innerHTML);
        }, false);
    }
    var i = 4;
    var btn = document.getElementById("btn");
    btn.addEventListener("click", function() {
        var li = document.createElement("li");
        li.innerHTML = "項目列表" + i++;
        ul.appendChild(li);
    });
</script>

示例2

下面示例借助事件委托技巧，利用事件傳播機制，在列表框 ul 元素上綁定 click 事件，當事件傳播到父節點 ul 上時，捕獲 click 事件，然后在事件處理函數中檢測當前事件響應節點類型，如果是 li 元素，則進一步執行下面代碼，否則跳出事件處理函數，結束響應。

<button id="btn">添加項目列表</button>
<ul id="list">
    <li>列表項目1</li>
    <li>列表項目2</li>
    <li>列表項目3</li>
</ul>
<script>
    var ul = document.getElementById("list");
    ul.addEventListener('click', function(e) {
        var e = e || window.event;
        var target = e.target || e.srcElement;
        if (e.target && e.target.nodeName.toUpperCase()=="LI") {
            alert(e.target.innerHTML);
        }
    }, false);
    var i = 4;
    var btn = document.getElementById("btn");
    btn.addEventListener("click", function () {
        var li = document.createElement("li");
        li.innerHTML = "項目列表" + i++;
        ul.appendChild(li);
    });
</script>

當頁面存在大量元素并且每個元素注冊了一個或多個事件時，可能會影響性能。訪問和修改更過的 DOM 節點時，程序就會更慢；特別是事件連接過程都發生在 load（或 DOMContentReady）事件中時，對任何一個富交互網頁來說，這都是一個繁忙的時間段。另外，瀏覽器需要保存每個事件句柄的記錄，也會占用更多內存。

到此，關于“如何理解javascript事件委托”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！