JavaScript 事件委托（event delegation）

事件委托 是将事件监听添加到父元素，而不是每个子元素单独设置监听器，当触发子元素时，事件会冒泡到父元素，监听器就会触发。

这种技术的好处是：

• 内存占用少，因为只需要一个父元素的事件处理程序，而无需为每个后代元素都设置事件处理程序。
• 无需从已删除的元素中解绑处理程序，也无需为新元素绑定处理程序。

例子1：

<ul id="parent-list">
                <li id="post-1">Item 1</li>
                <li id="post-2">Item 2</li>
                <li id="post-3">Item 3</li>
                <li id="post-4">Item 4</li>
                <li id="post-5">Item 5</li>
</ul>

<script>
            document.getElementById("parent-list").addEventListener("click",function(e){
                //e.target 是点击的元素
                if(e.target && e.target.nodeName == "LI"){
                //找到元素，输出Id
                    console.log("List item ",e.target.id.replace("post-","")," was clicked!");
                }
            });
</script>

运行结果：

例子2：

    <div id="myDiv">
        <p>first child</p>
        <a class="classA">second child</a>
        <div>third child</div>
        </div>

<script>
            document.getElementById("myDiv").addEventListener("click",function(e){
                if(e.target && e.target.matches("a.classA")){
                    console.log("Anchor element clicked!");
                }
            })
<script>

运行结果：

参考：(https://davidwalsh.name/event-delegate)