js中的事件委托

1.什么是事件委托

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

2.事件委托的好处

减少了操作DOM的次数,减少了浏览器的重绘与重排!

demo

        <ul id="test">
            <li>11</li>
            <li>22</li>
            <li>33</li>
            <li>44</li>
        </ul>
      不使用事件委托  
      var oUl = document.getElementById('test');
      var aLi = oUl.getElementsByTagName('li');
      for(var i=0;i<aLi.length;i++){
        aLi[i].onclick = function(){
            alert(123);
          }
      }
      这样做假如li过多会造成整个程序性能下降


      原生的事件委托
      oUl.addEventListener('click', function(ev) {
            var target = ev.target;
            while(target !== oUl) {
                if(target.tagName.toLowerCase() == 'li') {
                    console.log(target.innerText);
                    break;
                }
                target = target.parentNode;
            }
        })
      jq的事件委托
      $('ul').on('click','li',function(e){
            console.log(e.target.innerHTML)
        })