转载请注明http://blog.csdn.net/b2997215859/article/details/51159069
首先,事件有三个阶段:捕获、目标、冒泡(不了解的自行搜索)。
那么,当我需要给ul下1000个li都要绑定点击事件,应该用for循环遍历?答案当然no。就算可以,但是你要明白,这么做是要承担足够大的性能风险,因为首先你得用getElementByTagName("li")获取1000个li,返回得到一个动态数组,然后遍历该数组。要知道,DOM操作返回的dom虽然是数组,但是却没有不同的new Array()得到的数组性能好,遍历的时候,会造成性能问题。
那么,怎么解决“绑定点击事件“这个问题呢?
我们是否可以将点击事件绑定到ul上,当点击任一li的时候,事件会冒泡,触发父级元素ul的点击事件,这样的话,我们关注的焦点就变为,如何在ul的点击事件中知晓点击了哪一个li。
其实很简单,获取事件的目标即可,如下代码
window.onload = function(){
var oUi = document.getElementsByTagName("ul");
oUi[0].onclick = function(e){
var e = e || window.event;
var target = e.target || e.srcElement;
if(target.tagName.toLowerCase() == "li"){
alert(target.nodeName);
target.innerText = "hello";
}
}
}
这就是比较简单的事件代理。
根据http://blog.csdn.net/weinideai/article/details/3835839这篇博文,它有俩个优势和俩个缺点:
其一、减少内存中事件处理器,这样会提高页面加载的性能,减少页面崩溃的可能
其二、如果动态生成某个元素,并且需要为此元素绑定事件的时候,利用事件代理会减少代码的冗长。
同样,a coin has two sides.
它也可能会带来性能瓶颈:
其一、并不是所有事件都是冒泡的,如blur、focus、load、unload等等并不能像其他事件一样冒泡,实际上,blur和focus是属于捕获事件。
其二、在对鼠标mouseout、mouserover等情况下,会出现很怪异的问题。