今天又看到了这段代码,闲来无事,好好研究一下,也算开始了我的js学习之路(必须感谢老公的一起学习,用他的编程思想和我一起研究js...)
要理解事件委托,首先必须知道事件冒泡的思想。下文为转载的自己认为理解起来比较清楚的一篇文章。
对“事件处理程序过多”问题的解决访问就是事件委托。事件委托利用了事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。例如,click事件会一直冒泡到document层次。也就是说,我们可以为整个页面指定一个onclick事件处理程序,而不必给每个可单击的元素分别添加事件处理程序。以下面的HTML代码为例。
<ul id="myLinks"> <li id="goSomewhere">Go somewhere</li> <li id="doSomething">Do something</li> <li id="sayHi">Say hi</li> </ul>
其中包含3个被单击后会执行操作的列表项。按照传统的做法,需要像下面这样为它们添加3个事件处理程序:
var EventUtil = { addHandler: function (element, type, handler) { if (element.addEventListener) { element.addEventListener(type, handler, false); } else if (element.attachEvent) { element.attachEvent("on" + type, handler); } else { element["on" + type] = handler; } } }; var item1 = document.getElementById("goSomewhere"); var item2 = document.getElementById("doSomething") var item3 = document.getElementById("sayHi"); EventUtil.addHandler(item1, "click", function (event) { location.href = "http://www.w3cmm.com"; }); EventUtil.addHandler(item2, "click", function (event) { document.title = "我改变了文档的标题" }); EventUtil.addHandler(item3, "click", function () { alert("hi"); });
如果在一个复杂的Web引用程序中,对所有可单击的元素都采用这种方式,那么结果就会有数不清的代码用于添加事件处理程序。此时,可以利用事件委托技术解决这个问题。使用事件委托,只需在DOM树中尽量最高层次上添加一个事件处理程序,如下面的例子所示:
var EventUtil = { addHandler: function (element, type, handler) { if (element.addEventListener) { element.addEventListener(type, handler, false); } else if (element.attachEvent) { element.attachEvent("on" + type, handler); } else { element["on" + type] = handler; } }, getEvent: function (event) { return event ? event : window.event; }, getTarget: function (event) { return event.target || event.srcElement; } }; var list = document.getElementById("myLinks"); EventUtil.addHandler(list, "click", function (event) { event = EventUtil.getEvent(event); var target = EventUtil.getTarget(event); switch (target.id) { case "goSomewhere": location.href = "http://www.w3cmm.com"; break; case "doSomething": document.title = "我改变了文档的标题"; break; case "sayHi": alert("hi"); break; } });
在这段代码里,我们使用事件委托只为<ul>元素添加了一个onclick事件处理程序。由于所有列表项都是这个元素的节点,而且它们的事件会冒泡,所有单击事件最终会被这个函数处理。我们知道,事件目标是被单击的列表项,故而可以通过检测id属性来决定采取适当的操作。与前面未使用事件委托的代码比较,会发现这段代码的事件消耗更低,因为值取得了一个DOM元素,只添加了一个事件处理程序。虽然对用户来说最后的结果相同,但这种技术占有的内存更少。所有用到按钮的事件(多数鼠标事件和键盘事件)都适合采用事件委托技术。
如果可行的话,也可以考虑为document对象添加一个事件处理程序,用以处理页面上发生的某种特定类型的事件。这样做与采取传统的做法相比具有如下优点。
- document对象很快就可以访问,而且可以在页面生命周期的任何时点上为它添加事件处理程序(无需等待DOMContentLoaded或load事件)。换句话说,只要单击的元素呈现在页面上,就可以立即具备适当的功能。
- 在页面中设置事件处理程序所需要的时间更少。只添加一个事件处理程序所需要的DOM引用更少。
- 整个页面占用的内存空间更少,能够提升整体性能。
最适合采用事件委托技术的事件包括click、mousedown、mouseuup、keydown、keyup和keypress。虽然mouseover和mouseout事件也冒泡,但适当处理它们并不容易,而且经常需要计算元素的位置(因为当鼠标从一个元素移到其子节点时,或者当鼠标移除该元素时,都会触发mouseout事件)。