利用委托绑定事件

以click点击事件举例（引用Jquery库）

<ul>
    <li>
        <lable>姓名:
            <input type="text" value="" id="name">
        </lable>
        <button type="button" id="nameBtn">按钮1</button>
    </li>
    <li>
        <lable>性别:
            <input type="text" value="" id="sex">
        </lable>
        <button type="button" id="sexBtn">按钮2</button>
    </li>
</ul>

一、传统的写法是：
每个需要点击的元素（如按钮等）分别绑定一个点击事件，这种模式其 实是冒泡，从里到外找到元素然后绑定事件。

        $(function () {
           $('#nameBtn').click(function(){//TODO});
           $('#sexBtn').click(function(){//TODO});
        })

缺点：
1、每个函数都是对象，都会占用内存；内存中的对象越多，性能就越差。
2、反复操作DOM， 没有优化。

二、委托的写法：
只对最外层绑定一个事件，利用委托从外到里，根据属性或id、class，找到需要绑定事件的元素进行绑定

$(function () {
     $('ul').unbind('click').on('click',function (e) {
         var target = e.target;        //保存当前对象
         if(target.id == 'nameBtn'){
             alert($('#name').val());
           }else if(target.id == 'sexBtn'){
             alert($('#sex').val());
           }
             return false;                //取消冒泡
          })
      })

如此就比传统写法节约了内存，提高了性能。