一.事件委托#

事件委托就是利用事件冒泡的原理，把事件添加到父元素或祖先元素上，触发执行效果

      <input type="button" value="click me" id="btn6">
      <script>
      var btn6 = document.getElementById("btn6");
      document.onclick = function(event){
            event = event || window.event;
            var target = event.target || event.srcElement; 
            if(target == btn6){
                  alert(btn5.value); 
            }
       } 
     </script>

事件委托优点
1、提高JavaScript性能。事件委托可以显著的提高事件的处理速度，减少内存的占用。

      <ul id="list">
            <li id="item1" >item1</li> 
            <li id="item2" >item2</li>
            <li id="item3" >item3</li> 
      </ul> 
      <script> 
            var item1 = document.getElementById("item1");
            var item2 = document.getElementById("item2");
            var item3 = document.getElementById("item3");         
            document.addEventListener("click",function(event){ 
                  var target = event.target; 
                  if(target == item1){ 
                          alert("hello item1");
                  }else if(target == item2){ 
                  alert("hello item2");
                  }else if(target == item3){ 
                  alert("hello item3");
                  } 
          }) 
     </script> 

2、动态的添加DOM元素，不需要因为元素的改动而修改事件绑定。

          <ul id="list">
                 <li id="item1" >item1</li> 
                 <li id="item2" >item2</li>
                 <li id="item3" >item3</li>
          </ul> 
          <script> 
                 var list = document.getElementById("list");                       
                 document.addEventListener("click",function(event){
                         var target = event.target; 
                         if(target.nodeName == "LI"){ 
                                alert(target.innerHTML); 
                          } 
                 }) 
                var node=document.createElement("li"); 
                var textnode=document.createTextNode("item4");           
                node.appendChild(textnode); list.appendChild(node); 
          </script> 
           当点击item4时，item4有事件响应。说明事件委托可以为新添加的                
           DOM元素动态的添加事件。

二.事件冒泡#

阻止事件冒泡

        function stopBubble(e){  //如果传入事件对象且支持W3C的stopPropagation的用法  
            if(e && e.stopPropagation){ //即为非IE浏览器                 
                     e.stopPropagation(); 
            }else{  
                   //IE方式取消事件冒泡 //非标砖w3c有些谷歌，firfox也支持该属性 
                  window.event.cancelBubble=true; 
           }

阻止事件默认行为
（1）事件绑定模式下的 return false
（2）事件监听模式下的 event.preventDefault() 和 event.returnValue = false；
（3）return false既可以阻止事件冒泡，又可以阻止事件默认行为