事件委托实例

<ul id="ul1">
	<li>111</li>
	<li>222</li>
	<li>333</li>
	<li>444</li>
</ul>

上面的代码，如果想实现点击每个li都会弹出123，用事件委托怎么实现

<script>
	window.onload=function(){
	  var oUl = document.getElementById('ul1');
	  oUl.onclick = function(ev){
	  // IE8或IE8以下的浏览器中，事件处理函数中使用的事件对象是window.event。
          // IE8以上浏览器或者其他标准浏览器，通常使用给事件处理阐述传递的事件对象ev。
          var ev = ev || window.event;
          // Event对象提供了一个属性叫target，可以返回事件的目标节点，我们成为事件源，也就是说，target就可以表示为当前的事件操作的dom，但是不是真正操作dom，当然，这个是有兼容性的，标准浏览器用ev.target，IE浏览器用event.srcElement此时只是获取了当前节点的位置，并不知道是什么节点名称，这里我们用nodeName来获取具体是什么标签名，这个返回的是一个大写的，我们需要转成小写再做比较（习惯问题）
          var target = ev.target || ev.srcElement;
          if(target.nodeName.toLowerCase() == 'li'){
        	alert(123);
        	alert(target.innerHTML);
          }
	    }	
	  }
</script>	

如果点击每个li触发的效果不同，用事件委托怎么处理？

<ul id="ul1">
	<li id="add">添加</li>
	<li id="remove">删除</li>
	<li id="move">移动</li>
	<li id="select">选择</li>
</ul>

window.onload=function(){
   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'){
       switch(target.id){
         case 'add':
           alert('添加');
           break;
         case 'remove':
           alert('删除');
           break;
         case 'move':
           alert('移动');
           break;
         case 'select':
           alert('选择');
           break;
   }
 }
}
}

如果是新增的节点，新增的节点会有事件吗？下面用事件委托的方法也可以给新增的节点添加事件

<button id="btn1">添加一个li节点</button>
<ul id="ul1">
  <li>111</li>
  <li>222</li>
  <li>333</li>
  <li>444</li>
</ul>

<script>
 window.onload=function(){
   var btn = document.getElementById("btn1");
   var oUl = document.getElementById("ul1");
   var oLi = document.getElementsByTagName('li');
   var num = 4
   oUl.onmouseover = function(ev){
     var ev = ev || window.event;
     var target = ev.target || ev.srcElement;
     if(target.nodeName.toLowerCase() == 'li'){
         target.style.background = "red";
        }
   };
     oUl.onmouseout = function(ev){
                var ev = ev || window.event;
                var target = ev.target || ev.srcElement;
                if(target.nodeName.toLowerCase() == 'li'){
                    target.style.background = "green";
                }
                
            };
   // 添加节点
   btn.onclick = function(){
    num++;
    var newli = document.createElement('li');
    newli.innerHTML = num*111;
    oUl.appendChild(newli);
   }
}
</script>

总结：

那什么样的事件可以用事件委托，什么样的事件不可以用呢？

适合用事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress。

值得注意的是，mouseover和mouseout虽然也有事件冒泡，但是处理它们的时候需要特别的注意，因为需要经常计算它们的位置，处理起来不太容易。

不适合的就有很多了，举个例子，mousemove，每次都要计算它的位置，非常不好把控，在不如说focus，blur之类的，本身就没用冒泡的特性，自然就不能用事件委托了。