定义：只指定一个事件处理程序，就可以管理某一类型的所有事件。
参考链接：www.cnblogs.com/liugang-vip…
事件委托的原理
事件委托是利用事件的冒泡原理来实现的，就是事件从最深的节点开始，然后逐步向上传播事件，
举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。
事件委托的优点
在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思想之一就是减少DOM操作的原因；如果要用事件委托，就会将所有的操作放到js程序里面，与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能；
每个函数都是一个对象，是对象就会占用内存，对象越多，内存占用率就越大，自然性能就越差了（内存不够用，是硬伤），比如100个li，就要占用100个内存空间，如果是1000个，10000个呢，如果用事件委托，那么我们就可以只对它的父级（如果只有一个父级）这一个对象进行操作，这样我们就需要一个内存空间就够了，是不是省了很多，自然性能就会更好。
事件委托具体实现
Event对象提供了一个属性叫target，可以返回事件的目标节点，我们成为事件源，也就是说，target就可以表示为当前的事件操作的dom，但是不是真正操作dom。
当然，这个是有兼容性的，标准浏览器用ev.target，IE浏览器用event.srcElement，此时只是获取了当前节点的位置，并不知道是什么节点名称，这里我们用nodeName来获取具体是什么标签名，这个返回的是一个大写的，我们需要使用toLowerCase转成小写再做比较（习惯问题）
<body>
<ul id="ul1">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
<script>
window.onload = function () {
var oul = document.getElementById('ul1');
oul.onclick = function (ev) {
var ev = ev || window.ev;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == 'li') {
alert(target.innerHTML)
}
}
}
</script>
</body>
toLowerCase()转换为小写
toUpperCase()转换为大写
getElementsByTagName() 方法可返回带有指定标签名的对象的集合。
事件委托添加新节点
事件委托的方式在添加新节点的时候也会有事件。
<body>
<input type="button" value="添加" id="ipt">
<ul id="oul">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
<script>
window.onload = function() {
var btn = document.getElementById('ipt');
var oul = document.getElementById('oul');
var oli = oul.getElementsByTagName('li');
var num = 4;
// 事件委托
oul.onmouseover = function(ev) {
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == 'li') {
target.style.background = "red"
}
}
oul.onmouseout = function(ev) {
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == 'li') {
target.style.background = "#fff"
}
}
// 添加新节点
btn.onclick = function() {
num++;
var aaa = document.createElement('li');
aaa.innerHTML = 111 *num;
oul.appendChild(aaa);
}
}
</script>
</body>
什么样的事件可以用事件委托，什么样的事件不可以用？
适合用事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress。
值得注意的是，mouseover和mouseout虽然也有事件冒泡，但是处理它们的时候需要特别的注意，因为需要经常计算它们的位置，处理起来不太容易。
不适合的就有很多了，举个例子，mousemove，每次都要计算它的位置，非常不好把控，在不如说focus，blur之类的，本身就没用冒泡的特性，自然就不能用事件委托了。
parentNode 属性可返回某节点的父节点。
tagName、nodeName 属性获取元素的标签名
addEventListener() 方法用于向指定元素添加事件句柄。
