Javascript事件委托

Javascript事件通过冒泡传递，事件最初发生在某个元素，然后传递给该元素的父元素，父元素再传给父元素，如此一级一级往上传递。如果事件发生的元素不处理事件，而是让事件传递到祖先元素，让祖先元素处理，这就是事件委托。

事件委托很经典的应用就是在菜单上：



上面的菜单，可以这样写事件处理：

$("#menuBox").click(function(event){
var target = event.target;    //获取触发事件的元素
})

这样，我们只需要在父元素上监听一次点击事件就好了，不用每个item都监听一次click事件。因为监听事件消耗的资源少了，可以提高网页性能，减少内存占用。

另外，事件委托在一些内容动态生成的情况下非常有用（web APP很多这样的用法），比如上面的菜单我要增加一个按钮，如果不使用委托，我需要：

（1）向#menuBox插入一个新的Item元素

（2）为新的Item元素绑定事件

如果使用委托，我只要第（1）步就好了，事件是父元素来处理的，我不需要关心。

有动态生成，就有动态删除！现在我要把我刚刚新增的Item元素删除掉。直接remove掉Item的内容就行吗？不行，这样绑定在Item上的事件并没有取消掉，还在监听，浪费资源不说，还很容易造成各种奇怪的问题。

参考文档：what’s the benefit of event delegation