一、什么是事件委托？
事件委托又叫事件代理；JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。
事件委托两层含义：
举例：
有三个同事预计会在同一天收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台代为签收。现实当中，我们大都采用委托的方案。前台收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台MM也会在收到寄给新员工的快递后核实并代为签收。
这里其实还有两层意思：
1.在委托前台的同事是可以代为签收的，即程序中的现有的dom节点是有事件的；
2.员工也是可以被前台代为签收的，即程序中新添加的dom节点也是有事件的。
二、为什么用事件委托？
一般来说，dom需要有事件处理程序，我们都会直接给它设事件处理程序就好了，那如果是很多的dom需要添加事件处理呢？比如我们有100个li，每个li都有相同的click点击事件，可能我们会用for循环的方法，来遍历所有的li，然后给它们添加事件，那这么做会存在什么影响呢？
在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思想之一就是减少DOM操作的原因；如果要用事件委托，就会将所有的操作放到js程序里面，与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能；
每个函数都是一个对象，是对象就会占用内存，对象越多，内存占用率就越大，自然性能就越差了，比如上面的100个li，就要占用100个内存空间，如果是1000个，10000个呢，如果用事件委托，那么我们就可以只对它的父级（如果只有一个父级）这一个对象进行操作，这样我们就需要一个内存空间就够了，省了很多，自然性能就会更好。
三、事件委托原理：
四、举例：
常规写法：
<script> window.onload=function(){ var box=document.getElementById("box"); var inli=document.getElementsByTagName("li"); for(var i=0;i<inli.length;i++){ inli[i].onclick=function(){ console.log("咏鹅") } } } </script> <body> <div> <ul id="box"> <li>鹅，鹅，鹅，</li> <li>曲项向天歌，</li> <li>白毛浮绿水，</li> <li>红掌拨清波。</li> </ul> </div> </body>
事件委托：
<style> #box { width: 200px; height: 200px; background: #cccccc; text-align: center; } </style> <script> window.onload=function(){ var box=document.getElementById("box"); box.onclick=function(event){//Event对象提供了一个属性叫target，可以返回事件的目标节点，我们成为事件源，也就是说，target就可以表示为当前的事件操作的dom，但是不是真正操作dom
var event=event||window.event; var target=event.target.nodeName.toLowerCase();//将nodeName即节点名称改为小写 if(target=="li"){//只有点击li标签时才会触发 console.log("咏鹅") } } } </script> <body> <div> <ul id="box"> <li>鹅，鹅，鹅，</li> <li>曲项向天歌，</li> <li>白毛浮绿水，</li> <li>红掌拨清波。</li> </ul> </div> </body>
新增节点：
当鼠标移进时，变灰色，鼠标移出时，变白色，新增了li也是如此；
常规写法：
<script> window.onload=function(){ var btn=document.getElementById("btn"); var box=document.getElementById("box"); var inli=document.getElementsByTagName("li"); var num=0; function mHover(){ for(var i=0;i<inli.length;i++){ inli[i].onmousemove=function(){ this.style.background='#cccccc'; }; inli[i].onmouseout=function(){ this.style.background='#ffffff'; }; } } mHover(); btn.onclick=function(){ num++; var oli=document.createElement("li"); oli.innerHTML="新增节点"+num; box.appendChild(oli); mHover();//给新增节点也添加鼠标进出的方法；
} } </script> <body> <div> <button id="btn">增加新节点</button> <ul id="box"> <li>鹅，鹅，鹅，</li> <li>曲项向天歌，</li> <li>白毛浮绿水，</li> <li>红掌拨清波。</li> </ul> </div> </body>
事件委托：
<script> window.onload=function(){ var btn=document.getElementById("btn"); var box=document.getElementById("box"); var inli=document.getElementsByTagName("li"); var num=0; box.onmouseover=function(event){ var event=event||window.event; var target=event.target.nodeName.toLowerCase(); if(target=="li"){ event.target.style.background='#eeeeee'; } }; box.onmouseout=function(event){ var event=event||window.event; var target=event.target.nodeName.toLowerCase(); if(target=="li"){ event.target.style.background='#ffffff'; } }; btn.onclick=function(){ num++; var oli=document.createElement("li"); oli.innerHTML="新增节点"+num; box.appendChild(oli); } } </script> <body> <div> <button id="btn">增加新节点</button> <ul id="box"> <li>鹅，鹅，鹅，</li> <li>曲项向天歌，</li> <li>白毛浮绿水，</li> <li>红掌拨清波。</li> </ul> </div> </body>