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