事件代理——减少事件监听函数

事件代理（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属性确定事件发生的目标元素，当目标元素一致时，父元素上的监听函数就进一步起作用。

Reference

https://www.geeksforgeeks.org/event-delegation-in-javascript/