标签：解决 erro 事先 事件冒泡 list tar www. use div
事件委托在js高级程序设计中的事件章节被提到。内容参考了红书高级程序设计，写下来供自己和大家参考。
对“事件处理程序过多的”的解决方案就是事件委托。事件委托 利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。
因为在js中，添加到页面的事件处理程序的数量将会关系到页面的整体运行性能。导致这个问题的原因是多方面的，1：函数是对象，对象占据内存，内存中的对象越多性能越差；2：必须事先指定的所有事件处理程序会导致dom的访问次数，会延续整个页面的交互就绪时间。这样利用事件委托可以提升性能。
下面例子
<div id="mylinks">
<div id="goSomewhere">go somewhere</div>
<div id="doSomething">do something</div>
<div id="sayhi">sayHi</div>
</div>
//点击3个列表，执行三个操作，以往做法：
var item1 = document.getElementById("goSomewhere"); var item2 = document.getElementById("doSomething"); var item3 = document.getElementById("sayHi"); EventUtil.addHandeler(item1,"click",function(event) { location.href = "www.baidu.com"; }); EventUtil.addHandeler(item2,"click",function(event) { document.title = " i changed title"; }); EventUtil.addHandeler(item3,"click",function(event){ alert("hi"); });
//利用事件委托，只需要在dom树中尽量在最高的层次上添加一个事件处理程序，如下：
var list = document.getElementById("mylinks"); EventUtil.addHandeler(list,"click",function(event) { event = EventUtil.getEvent(event); var target = EventUtil.getTarget(event); switch(target.id){ case "goSomewhere": location.href = "www.baidu.com"; break; case "doSomething": document.title = "i changes title"; break; case "sayHi": alert("hi"); default: console.log("error"); } })
因为所有列表都是这个元素ur:id ="myLinks"的子元素，而且他们的事件冒泡，最终单击元素会冒泡到这个这个函数处理事件。这样与以往做法相比，这段代码的消耗会变低，因为只取了一个dom元素，只添加了一个事件处理程序，这样占据的内存会更少。
所有用到按钮的事件（多数鼠标事件和键盘事件）都适合采用事件委托技术。
1.document对象很快就访问到，而且可以在页面生命周期的任何时间点为它添加事件处理程序。换句话说，只要单击的元素呈现在页面上，就可以立即具备适当的功能。
2.在页面上设置事件处理程序所需的时间更少。只需要添加一个事件处理程序所需的dom引用更少，所花时间也少。
3.整个页面占用的内存空间更少，能够提升整体性能。
click,mousedown,mouseup,keyup,keydown,keypress.
标签：解决 erro 事先 事件冒泡 list tar www. use div
原文地址：http://www.cnblogs.com/wangwenhui/p/7659069.html
