概述
事件委托,也叫事件代理,JS中就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。借来网上比较著名的拿快递例子：
有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台MM也会在收到寄给新员工的快递后核实并代为签收
2个需要注意的点：
第一：现在委托前台的同事是可以代为签收的，即程序中的现有的dom节点是有事件的；
第二: 新员工也是可以被前台代为签收的，即程序中新添加的dom节点也是有事件的。
为什么要设置事件委托
一般来说，dom需要有事件处理程序，我们都会直接给它设事件处理程序就好了，那如果是很多的dom需要添加事件处理呢？比如我们有100个li，每个li都有相同的click事件，可能我们用for循环的方法来遍历所有的li,然后给它们添加事件，那么这么做会有什么影响呢
在JS中,添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多,引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思想之一就是减少dom操作的原因；如果要用事件委托，就会将所有的操作放到js程序里面，与dom的操作就需要交互一次，这样就能大大减少与dom的交互次数，提高性能;
每个函数都是一个对象，是对象就会占用内存，对象越多，内存占用率就越大，自然性能就越差了（内存不够用，是硬伤，哈哈），比如上面的100个li，就要占用100个内存空间，如果是1000个，10000个呢，那只能说呵呵了，如果用事件委托，那么我们就可以只对它的父级（如果只有一个父级）这一个对象进行操作，这样我们就需要一个内存空间就够了，是不是省了很多，自然性能就会更好。
事件委托的原理
事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？就是事件从最深的节点开始，然后逐步向上传播事件，举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。
事件委托的实现
<script>
var ul = document.querySelector('ul');
var btn = document.querySelector('button');
var i = 4;
document.oncontextmenu = function (e) {
e = e || window.event;
e.preventDefault();
ul.style.display = 'block';
ul.style.top = e.pageY + 'px';
ul.style.left = e.pageX + 'px';
//这里开始就是委托，委托父级ul处理子级元素li里面的事件
ul.onmouseover = function (e) {
e = e || window.event;
var target = e.target || e.srcElement;
if (target.nodeName == 'LI') {
target.style.backgroundColor = 'aqua';
}
}
ul.onmouseout = function (e) {
e = e || window.event;
var target = e.target || e.srcElement;
if (target.nodeName == 'LI') {
target.style.backgroundColor = '';
}
}
ul.onclick = function (e) {
e = e || window.event;
var target = e.target || e.srcElement;
if (target.nodeName == 'LI') {
alert("我是" + target.innerText)
}
}
}
document.onclick = function () {
ul.style.display = 'none';
}
btn.onclick = function () {
i++;
var li = document.createElement('li')
ul.appendChild(li);
li.innerText = "首页" + i
}
</script>
