事件委托

事件委托在面试中还是经常被问到的，

比如下面的代码

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

现在问题来了？怎么样高效的给li元素绑定事件，当用户单击li元素的时候能够提示li元素中的内容？

如果这个用JQUERY来做很好解决

$(function(){

     $("li").on("click",funcition(){

          alert($(this).text());  或者写成 alert($(this).html());

        }

    })

但是用原生的JS来写最初的想法是：

window.onload = function() {

var ul = document.getElementById("ul");

var lis = ul.getElementsByTagName("li");

for(var i = lis.length-1;i>=0;i--) {

  lis[i].onclick = function() {

         alert(this.innerHTML);

          }

     }

        }

这种想法是最简单也是最直观 也是正确的，但是存在一定的问题，当DOM中的li

元素特别多的时候，这样的循环遍历的绑定操作势必会占用大量的资源，这个时候

我们可以使用事件的一些特性，将操作绑定到ul元素上面，当事件触发时，自动获取

当前事件操作的对象，然后再完成操作，来看下面的代码：

window.onload = function(){

    }