javascript中的事件委託（代理）

一隻魚_發表於2017-09-05
JavaScript事件

—–事件委託的原理用到的就是事件冒泡和目標元素，把事件處理器新增到父元素，等待子元素事件冒泡，並且父元素能夠通過target（IE為srcElement）判斷是哪個子元素，從而做相應處理。

傳統的事件處理：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
</body>
</html>
<script>
    (function () {
        var oli = document.getElementsByTagName("li");
        for (var i = 0; i < oli.length; i++) {
            oli[i].addEventListener("click",showCon,false);
        }
        function showCon() {
            console.log(this.innerHTML);
        }
    })()
</script>

事件委託

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
</body>
</html>
<script>
    (function(){
        var oul = document.getElementsByTagName("ul")[0];
         oul.addEventListener('click',showCon,false);
         function showCon(e) {
            e=e||window.event;
            var targetElement=e.target||e.srcElement;
             if(targetElement.nodeName.toLowerCase()==="li"){
               console.log(targetElement.innerHTML);
               }
        }
})();
</script>

事件委託的優點：
1.管理的函式變少了。不需要為每個元素都新增監聽函式。對於同一個父節點下面類似的子元素，可以通過委託給父元素的監聽函式來處理事件。
2.可以方便地動態新增和修改元素，不需要因為元素的改動而修改事件繫結。
3.JavaScript和DOM節點之間的關聯變少了，這樣也就減少了因迴圈引用而帶來的記憶體洩漏發生的概率

相關文章