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，因此我们只需要监听父亲元素即可