事件委托： 是本应该给子元素绑定点击事件，但是却委托给父元素代替自己执行方法的一种办法。
一般来说，dom需要有事件处理程序，我们都会直接给它设事件处理程序就好了，那如果是很多的dom需要添加事件处理呢？比如我们有100个li，每个li都有相同的click点击事件，可能我们会用for循环的方法，来遍历所有的li，然后给它们添加事件，那这么做会存在什么影响呢？
在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，这就是为什么性能优化的主要思想之一就是减少DOM操作的原因；如果要用事件委托，就会将所有的操作放到js程序里面，与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能；
每个函数都是一个对象，是对象就会占用内存，对象越多，内存占用率就越大，自然性能就越差了，比如100个li，就要占用100个内存空间，如果是1000个，10000个呢，那就非常尴尬了。
但是如果用事件委托，那么我们就可以只对它的父级（如果只有一个父级）这一个对象进行操作，这样我们就需要一个内存空间就够了。
那么事件委托他的原理是什么呢？
举个栗子
在e中呢，有e.target属性，就是当前点击的元素。
那么我们console.dir一下打印当前dom对象，这里面有当前dom元素的所有属性以及方法。可以发现e.target.tagName正好是我们当前点击的元素的名字li
那么我们就可以进行判断，如果点击的是li就可以执行一些自己的逻辑代码。
那么为什么是LI呢？不是li或者<li></li>，由于内部封装的缘故，我们只能打印出来按照他的值去进行一个判断。
至此，我们就已经了解了原生的事件委托。后面jq中还会有更加方便的事件委托供我们使用，最后再总结一下事件委托的原理。
事件委托是利用事件冒泡的原理，我们点击事件（无论是onclick还是addEventListener（默认第三个参数为false，代表事件冒泡绑定，为true代表事件捕获绑定）），都是事件冒泡去触发事件的，我们在点击了li之后，冒泡到父元素ul上，触发事件，然后在触发的函数中判断是不是我们点击的这个元素，再执行后续操作。
这就是事件委托，让父元素代替执行事件。
最后附上源码：
[AppleScript] 纯文本查看 复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
<script>
/* 点击某个li让他添加上一个背景颜色。
原始做法我们是采用一个for循环给每一个li绑定一个点击事件
那么在上面我们也说过了，每一个点击事件都会占用一个内存，所以我们要使用事件委托的方式来完成这个需求。
我们现在把原本要给li的事件委托给父元素（ul）执行
*/
var ul = document.querySelector('ul')
ul.addEventListener('click', function (e) {
// 我们都知道li也是属于ul当中的，那么我们点击li的时候，也会触发这里的代码。
// e是事件源参数，我们打印一下。
console.dir(e.target)
// 进行点击元素的判断，如果是li那么就执行操作逻辑
if (e.target.tagName == 'LI') {
e.target.style.backgroundColor = 'red';
}
})
</script>
</html>
收藏
淘帖
踩
