js中的事件委托
1、什么是事件委托？
簡單來講，事件委托就是本來很多元素都需要有自己的事件，但是一個一個給太麻煩了，因此找一個委托人，這個委托人就是父親元素。
原理：利用的是事件冒泡原理，觸發子元素事件會默認觸發父元素的事件。
2、事件委托的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件委托</title>
<style>
ul {
list-style: none;
text-align: center;
}
ul li {
display: block;
width: 100px;
height: 100px;
}
li:nth-child(2n) {
background-color: red;
}
li:nth-child(2n+1) {
background-color: pink;
}
ul .active {
background-color: green;
}
</style>
</head>
<body>
<div>
<ul>
<li>測試1</li>
<li>測試2</li>
<li>測試3</li>
<li>測試4</li>
<li>測試5</li>
<li>測試6</li>
</ul>
</div>
<script>
let ulNode = document.querySelector("ul")
ulNode.addEventListener("click",function(ev) {
let lis = this.querySelectorAll("li")
for(let i=0;i<lis.length;i++) {
// lis[i].className = ""
lis[i].classList.remove("active")
}
ev.target.classList.add("active")
})
</script>
</body>
</html>
上述事件中，我們將li的事件委托給了父親元素ul，因此我們只需要監聽父親元素即可
