【事件代理】 動態數據列表裏，如何監聽每條數據的點擊？

前言

在問題前，需要先清楚關於事件冒泡、事件代理的定義

事件冒泡

基於DOM樹形結構
事件順着觸發元素往上冒泡
應用場景：事件代理

事件代理

原理： 事件冒泡機制
實現方式：可用addEventListener(); //所有主流瀏覽器，除了IE8及更早IE版本。
特點：

代碼簡潔，把事件處理器添加到一個父級元素上，避免了把事件處理器添加到多個子級元素上。  
大量減少內存佔用， 減少事件註冊。   
適用新增元素實現動態綁定事件。

具體實現如下：

DOM節點：

<div id="div3">
    <a href="#">a1</a><br>
    <a href="#">a2</a><br>
    <a href="#">a3</a><br>
    <a href="#">a4</a><br>
    <button>加載更多...</button>
</div>

實現邏輯：

給每個a標籤添加點擊事件
//事件綁定方法
function bindEvent(elem,type,fn) {
    elem.addEventListener(type,fn)
}
//獲取父級元素
const div3=document.getElementById('div3')
給父級元素添加綁定事件
bindEvent(div3,'click',event=>{
    event.preventDefault();
    const target=event.target
    //通過event.target判斷是否是a標籤
    if (target.nodeName == 'A') {
    	//給符合要求的元素添加事件
        alert(target.innerHTML)
    }
})

綜上所述實現原理：
Step1.給父級元素添加事件代理
Step2.通過event.target判斷是否是當前需要綁定的元素
Step3.觸發元素