js事件代理
什么是事件代理呢？
举个例子来讲：
鸡妈妈有10个鸡宝宝，上帝要为这个鸡妈妈的所有鸡宝宝一根彩色的羽毛来抵御黄鼠狼，以后出生的也要有一根彩色的羽毛，走丢的鸡宝宝要回收彩色羽毛。
普通的做法是为这个鸡妈妈的所有鸡宝宝都添加一个唯一的标记，然后上帝根据该标记区分出所有鸡宝宝中这个鸡妈妈的鸡宝宝，然后为它们分发彩色的羽毛，但麻烦的是：要有一个为所有鸡宝宝添加唯一标记的操作，要为刚出生的鸡宝宝手动添加标记，要为走丢的鸡宝宝删除为它分发彩色羽毛的操作。
但我们忽略了一个很重要的线索，这个鸡妈妈的所有的鸡宝宝本来就有一个唯一的隐形标记，就是它们的妈妈都是同一个人，所以上帝可以给鸡妈妈一个彩色的羽毛，以后有黄鼠狼来抓鸡宝宝的时候，鸡宝宝告诉鸡妈妈，鸡妈妈拿出彩色羽毛就可以抵御黄鼠狼了，不用为每个鸡宝宝都发一个彩色羽毛，而且以后新出生的鸡宝宝也可以直接找鸡妈妈，走丢掉的鸡宝宝找不到鸡妈妈，自然也就没了彩色羽毛的庇佑。
demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul {
width: 100px;
height: auto;
}
ul > li {
width: 100%;
height: 25px;
border: 1px solid #ccc;
background-color: red;
list-style: none;
cursor: pointer;
}
</style>
</head>
<body>
<ul class="mother-hen">
<li>小鸡1号</li>
<li>小鸡2号</li>
<li>小鸡3号</li>
<li>小鸡4号</li>
</ul>
<script>
const motherHen = document.querySelector('.mother-hen');
motherHen.addEventListener('click', (e) =>{
e.target.innerText = '我被点击了';
});
</script>
</body>
</html>
上例中如果新增或删除li也无需做任何多余的操作。
将多个子元素上的事件流绑定到父元素上，可以节约内存，减少时间注册以及事件解绑，优化性能。也可以将整个页面的所有元素的事件流绑定到document上，很多框架就是以此来优化性能的，但也不能一味的将页面上所有的事件都放到document上，因为事件向上传递也是花费时间的。
ie没有e.target，取而代之的是window.event.srcElement。
396
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
