事件委托的正确写法

一般网上的代码都是下面这个样子：

var oUl = document.getElementById("ul1");
　　oUl.onclick = function(ev){
　　　　var ev = ev || window.event;
　　　　var target = ev.target || ev.srcElement;
　　　　if(target.nodeName.toLowerCase() == 'li'){
　 　　　　　　    alert(123);
　　　　　　　  alert(target.innerHTML);
　　　　}
　　}

但是如果你的li标签里嵌套了其他标签，比如：

<ul id="ul1">
    <li><span>111</span></li>
</ul>

那么当你点击“111”的时候上面的js写法就是无效的，因为你直接点击的并不是li标签。所以在这里我们还需要判断点击的标签的父元素是不是li，所以这里的代码中要加一个while循环:

var oUl = document.getElementById("ul1");

oUl.onclick = function(e){
    var e = e || window.event; 
    var target = e.target || e.srcElement;
    while(target.tagName !== 'LI'){
      target = target.parentNode;
      if(target === oUl){
        target = null;
        break;
      }
    }
    if(target){
      console.log('你点击了ul中的li');
    }else{
      console.log('你点击的不是ul中的li');
    }
}