js事件委托/事件代理

事件委托就是利用事件冒泡，只指定一个时间处理程序就可以管理某一类型的所有事例。

• 优点：提高性能

JavaScript方式

    <ul id="list">
      <li>按钮1</li>
      <li>按钮2</li>
      <li>按钮3</li>
      <li>按钮4</li>
    </ul>
    <button onclick="createLi()">create</button>

    document.getElementById('list').onclick = function(e){
      var e = e || window.event;
      // event对象属性target 返回事件的目标节点
      var target = e.target || e.srcElement;
      if(target.nodeName == 'LI'){
        alert(123+'---'+target.innerHTML);
      }
    }
    // 对于之后添加的元素代理事件依然有效
    function createLi(){
      var newLi = document.createElement('li');
      newLi.innerHTML = 'newLi';
      document.getElementById('list').appendChild(newLi);
    }

用事件委托的方式，新添加的子元素是带有事件效果的。当我们使用事件委托的时候，不需要去遍历元素的子节点，只需要给父级元素添加事件就好了，可以减少DOM操作。

jQuery方式

on委托事件
语法：$(selector).delegate(childSelector,event,data,function)

    $('#list').on('click', 'li',function(){
      alert(123+'---'+$(this).html());
    });
    function createLi(){
      $('#list').append('<li></li>').children('li:last').html('newLi');
    }