JavaScript事件代理

事件代理用到了两个在JavaScript事件中常被忽略的特性：事件冒泡和目标元素。

事件冒泡： 

        当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有的祖先元素中被触发。这个事件从事件的原始元素开始一直冒泡到DOM树最上层。

目标元素：

       任何事件的目标元素都是最开始的那个元素，在我们的这个例子中也就是按钮，并且它在我们的元素对象中以属性的形式出现。

      使用事件代理，我们可以把事件处理器添加到一个元素上，等待一个事件从它的子级元里冒泡上来，并且可以得知这个事件是从哪个元素开始的。

好处：

        比如说需要让表格的每一个单元格在被点击的时候变成可编辑的状态。如果事件处理器加到这1000个单元格会产生一个很大的性能问题，并且有可能导致内存泄漏，甚至是浏览器的崩溃。相反地使用事件代理，你只需要把一个事件处理器添加到table元素上就可以了，这个函数可以把点击事件截下来，并且判断是哪个单元格被点击了。

代码实现过程：  实现如何检测目标元素。

        比如说我们有一个table元素，ID是‘report’。我们为这个表格添加一个事件处理器以调用editCell函数。editCell函数需要判断传到table来的事件的目标元素。考虑到我们要写的几个函数都有可能用到这一功能，所以我们把它单独放到一个名为getEventTarget的函数中：

        e表示一个事件对象，我们只需要写一点点跨浏览器的代码来返回目标元素，在IE里目标元素放在srcElement属性中，而在其他的浏览器里则是target属性。

    一个简单应用的实例如下：

JavaScript事件代理带来的好处有：

1.那些需要处理创建的以及驻留在内存中的事件处理器少了。提高了性能，并降低了崩溃的风险。

2.在DOM更新后无需重新绑定事件处理器了。如果你的页面是动态加载的，比如说通过AJAX，你不再需要在元素被载入的时候来添加或者删除事件处理器。

JavaScript事件代理带来的缺点有：

1.你的事件管理代码有可能成为性能瓶颈的风险，所以尽量使它能够短小精悍。

2.不是所有的事件都是能冒泡的。blur，focus，load和unload不能像其他事件一样冒泡。事实上blur和focus可以用事件捕获而非事件冒泡的方法获得（在IE之外的其它浏览器中）。在管理鼠标事件的时候有些需要注意的地方。如果你的代码处理mousemove事件的话你遇上的性能瓶颈可就大了，因为mousemove事件触发非常频繁。而mouseout则因其怪异的表现而变得很难用事件代理来管理。