JavaScript中的事件代理

转载请注明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等情况下，会出现很怪异的问题。