事件委托
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<ul>
<li>知否知否, 点我应有弹框在手！</li>
<li>知否知否, 点我应有弹框在手！</li>
<li>知否知否, 点我应有弹框在手！</li>
<li>知否知否, 点我应有弹框在手！</li>
<li>知否知否, 点我应有弹框在手！</li>
</ul>
<script>
// 事件委托的核心原理：给父节点添加侦听器, 利用事件冒泡影响每一个子节点
var ul = document.querySelector("ul");
// 点击了li, 冒泡到ul上
ul.addEventListener("click", function (e) {
alert("知否知否, 点我应有弹框在手！");
// e.target 这个可以得到我们点击的对象
e.target.style.backgroundColor = "pink";
});
</script>
</body>
</html>