<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>点我，我就变颜色</li>
<li>点我，我就变颜色</li>
<li>点我，我就变颜色</li>
<li>点我，我就变颜色</li>
</ul>
<script>
// 事件委托原理 给父节点 添加侦听器 利用事件冒泡原理 来影响子节点
// 事件委托 只对DOM 操作一次 效率更高
var ul = document.querySelector('ul');
ul.addEventListener('click', function (e) {
e.target.style.backgroundColor = 'pink'; // e.target 获得所点击的子节点
})
</script>
</body>
</html>
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) | 黑马程序员IT技术论坛 X3.2 |