关于javascript:事件代理减少事件监听函数

事件代理（Event Delegation）很简略，次要是为了缩小了事件监听函数的数量，通过利用事件冒泡阶段，将事件的解决搁置在父元素上实现。

来看一个例子：

HTML 上创立一个 id 为 app 的 div：

<div id="app"></div>

创立 ul 列表和 li，给每一个 li 增加一个监听函数：

<script>
    const ul = document.createElement('ul');

    for (let i = 0; i < 10; i++) {const li = document.createElement('li');
        li.textContent = `This is line ${i}`;
        li.addEventListener('click', () => {console.log('Responding');
        });
        ul.appendChild(li);
    }
    
    document.getElementById('app').appendChild(ul);
</script>

下面造成的代码成果如下：

因为每一个 li 都有对应的监听函数，然而监听函数都是一样的，咱们能够把函数提取进去：

<script>
    const ul = document.createElement('ul');
    
    function responding() {console.log('Responding');
    }

    for (let i = 0; i < 10; i++) {const li = document.createElement('li');
        li.textContent = `This is line ${i}`;
        li.addEventListener('click', responding);
        ul.appendChild(li);
    } 

    document.getElementById('app').appendChild(ul);
</script>

下面的代码中，仍旧有很多事件监听函数指向同一个函数，依然没有解决问题，咱们能够通过事件代理来实现雷同的成果：

<script>
    const ul = document.createElement('ul');
    ul.addEventListener('click', event => {if(event.target.nodeName.toLowerCase() === 'li'){console.log('Responding');
        }
    });
    
    for (let i = 0; i < 10; i++) {const li = document.createElement('li');
        li.textContent = `This is line ${i}`;
        ul.appendChild(li);
    } 
    
    document.getElementById('app').appendChild(ul);
</script>

很简略，次要是在事件冒泡的阶段，指标元素不设置监听函数，而是在父元素上设置监听函数，通过 event 对象的 target 属性确定事件产生的指标元素，当指标元素统一时，父元素上的监听函数就进一步起作用。

最初

看到这里，祝贺你实现了事件代理的学习 🎉🎉🎉

更多优质文章能够关注公众号『鹏哥儿的 Echo』

生命不息，笔耕不辍

Reference

https://www.geeksforgeeks.org…