事件委托
什么是事件委托呢?
举个简单的例子,你家里面有很多的孩子,照顾每个孩子显得比较麻烦和吃力,这时候我们可以把这些孩子托付给学校老师,让老师负责。这就是事件委托。
为什么要事件委托?
事件委托可以减少操作的重复性和繁琐的操作,比如下面这个例子。
例子
要求:当点击某一个li的时候,其背景颜色改变。
HTML部分
<ul>
<li>知否知否,点我应有弹框在手!</li>
<li>知否知否,点我应有弹框在手!</li>
<li>知否知否,点我应有弹框在手!</li>
<li>知否知否,点我应有弹框在手!</li>
<li>知否知否,点我应有弹框在手!</li>
</ul>
按照常规做法,我们可以进行for循环,对每一个li进行事件监听,如果监听到li被点击,改变其颜色。这当然可以,但是我们也可以对父节点监听,再利用冒泡影响子节点.
JS代码如下
<script>
// 事件委托的核心原理:给父节点添加侦听器, 利用事件冒泡影响每一个子节点
var ul = document.querySelector('ul');
ul.addEventListener('click', function(e) {
// e.target 这个可以得到我们点击的对象
e.target.style.backgroundColor = 'pink';
})
</script>
这个相对于for循环是不是简单了很多呢。