<div id="div22"><h3> <font color=red /> 22，JS中的事件委托机制 </font> <h3></div> 用for循环的方法，来遍历所有的li，然后给它们添加事件，缺点： 1，操作DOM次数过多，造成浏览器的重排和重绘就越多； 2，每个事件都是一个对象，事件处理程序越多，占用的内存越多，影响前端性能； **事件委托（事件代理）原理——事件冒泡** 对“事件处理程序过多”问题的解决方案就是事件委托，事件委托利用事件冒泡（从最深的节点开始，然后逐步向上传播事件​​​​​​​） 只在他们的父元素上指定一个事件处理程序，就可以管理某一类型的的所有事件。委托它们父级代为执行事件​​​​​​​。 利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行 >1、遍历带来的性能问题。 2、button如果是动态添加的，那么必须用事件委托。 3、由于事件委托是通过事件冒泡实现的，所以如果子级的元素(e.stopPropagation())阻止了事件冒泡，那么事件委托也将失效！ 适合事件委托的事件有：click，mousedown，mouseup，keydown，keyup，keypress ```javascript // <ul id="ul"><li>1</li> <li>2</li></ul> // 脚本 window.οnlοad=function(){ var myUl=document.getElementById('ul'); myUl.addEventListener('click',function(ev){ var ev= ev||window.ev; if(ev.target.nodeName.toLocaleLowerCase()=='li'){ ev.target.style.backgroundColor="black"; } }); } ``` Event对象提供了一个属性叫target，可以返回事件的目标节点，成为事件源， target表示为当前的事件操作的dom，但不是真正操作dom， 标准浏览器用ev.target，IE用event.srcElement，获取了当前节点的位置， 用nodeName来获取具体节点标签名，转成小写 - 事件冒泡：会从当前触发的事件目标一级一级往上传递，依次触发，**直到document为止**。 - 事件捕获：会从**document开始**触发，一级一级往下传递，依次触发，直到真正事件目标为止。 ## 事件冒泡与事件委托的对比 * 事件冒泡：box 内部无论是什么元素，点击后都会触发 box 的点击事件 * 事件委托：可以对 box 内部的元素进行筛选，不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。 阻止冒泡： `e.stopPropagation();` 屏蔽浏览去的默认行为 ` e.preventDefult();return false;`