事件委派的使用及做用

事件委派

事件委派適用於將來的元素（動態添加的元素）。

利用事件冒泡，將後代元素上事件的處理程序委派給祖先元素。

event.target || event.srcElement - 在事件傳播的過程當中，獲取最初觸發事件的事件源元素

示例：
此例子在html初始化了一個id爲wrapBox的ul元素。

然後經過js在for循環當中給ul添加了四個子元素，並分別給他們設置了不一樣的id。

最後在id爲wrapBox的父元素上面添加了點擊事件，經過event.target獲取事件源元素。

PS: 若是不想在點擊UL的時候觸發事件那就作一個if判斷，判斷它的標籤名稱是否是UL，若是是UL直接return就能夠了。

<ul id="wrapBox"></ul>

<script type="text/javascript"> let wrapBoxNode = document.getElementById('wrapBox'); for (let i = 0; i < 4; i++) { let childNode = document.createElement('li'); childNode.setAttribute('id', `child_${i}`) wrapBoxNode.appendChild(childNode) } wrapBoxNode.onclick = (event) => { let target = event.target; console.log(target) } </script>

實現的效果：