看下面这个例子，你怎么为每个li标签绑定事件处理函数？

 <ul id="list">
        <li id="label1">标签1</li>
        <li id="label2">标签2</li>
        <li id="label3">标签3</li>
        ......
        <li id="label100">标签100</li>
 </ul>

也许你会想到

$('#list li').on('click', function(){} );

你有没有想过，这样其实是给列表的每一项分别绑定了一个点击事件。这样做的弊端在于，增加了内存，因为$(’#list li’)里有100个li对象，而且还降低了代码性能，因为$(’list li’)会搜索ul#data-list下所有的li元素。 有没有什么解决办法，当然，我们可以利用事件委托机制，通过一个事件处理函数就可以管理一个类型的所有事件。因为事件委托利用事件冒泡，比如click事件会一直冒泡到document，所以我们可以为整个页面制定一个事件处理程序，而不需要为每一个元素都绑定一个事件处理。事件委托还带来个意外惊喜，当DOM结构改变时，我们不需要改动事件处理函数，也不再需要重新检索元素和绑定事件。

$('#data-list').on('click', 'li', function(){} );

其实on函数有四个参数，其中第二个就是一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是 null 或者忽略了该选择器，那么被选中的元素总是能触发事件。

上面的例子标签和处理函数都是相同的，那扩展一下如果里面有很多种标签怎么办而且需要的处理函数还不相同，这就需要我们用原生js了，所以和还是原生js比较强大是吧。

document.onclick = function(event){
        //获取事件 IE 要用 window.event
        event = event || window.event;
        
        //获得触发事件的元素 IE 要用 srcElement 
        var target = event.target || event.srcElement;        

        switch(target.id){
                case "label1": //do something
                        break;
                case "label2": //do something
                        break;
                case "label3": //do something
                        break;
        }
};

在《JavaScript高级程序设计》中使用的是EventUtil，想了解看看这篇文章EventUtil——跨浏览器的事件对象 我主要参考了JavaScript：通过事件委托实现事件可配置这篇文章