利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！
1、那什么样的事件可以用事件委托，什么样的事件不可以用呢？
- 适合用事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress。
- 值得注意的是，mouseover 和 mouseout 虽然也有事件冒泡，但是处理它们的时候需要特别的注意，因为需要经常计算它们的位置，处理起来不太容易。
- 不适合的就有很多了，举个例子，mousemove，每次都要计算它的位置，非常不好把控，在不如说 focus，blur 之类的，本身就没用冒泡的特性，自然就不用事件委托了。
2、为什么要用事件委托
1.提高性能
- 苹果
- 香蕉
- 凤梨
// good
document.querySelector('ul').onclick = (event) => {
let target = event.target
if (target.nodeName === 'LI') {console.log(target.innerHTML)}
}// bad
document.querySelectorAll('li').forEach((e) => {
e.onclick = function() {console.log(this.innerHTML)}
})2.新添加的元素还会有之前的事件。
3、事件冒泡与事件委托的对比
- 事件冒泡：box 内部无论是什么元素，点击后都会触发 box 的点击事件
- 事件委托：可以对 box 内部的元素进行筛选
4、事件委托怎么取索引？
<ul id="ul">
<li> aaaaaaaa </li>
<li> 事件委托了 点击当前， 如何获取 这个点击的下标 </li>
<li> cccccccc </li>
</ul>
window.onload = function() {
var oUl = document.getElementById("ul");
var aLi = oUl.getElementsByTagName("li");
oUl.onclick = function(ev) {
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if (target.nodeName.toLowerCase() == "li") {
var that = target;
var index;
for (var i = 0; i < aLi.length; i++)
if (aLi[i] === target) index = i;
if (index >= 0) alert('我的下标是第' + index + '个');
target.style.background = "red";
}
}
}
原文链接: https://blog.csdn.net/hexadecimal_001/article/details/139681111