DOM事件探秘（一）

DOM事件学习，事件流、事件处理程序和事件对象

---

1.事件流

从页面中接收事件的顺序

IE:事件冒泡流
即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收，然后逐级向上转播至最不具体的节点(文档)。
Netscape：事件捕获流
不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件

---

2.事件处理程序

HTML事件处理程序
事件直接加在HTML代码中，不建议使用
DOM 0级事件处理程序
DOM 2级事件处理程序（IE不支持）
定义了两个方法：addEventListener() 和 removeEventListener()，这俩方法都接收三个参数：

要处理的事件名；
作为事件处理程序的函数名；
布尔值——冒泡（false）或捕获（true）

IE事件处理程序
attachEvent()和detachEvent()，接收相同的两个参数：事件处理程序的名称和事件处理程序的函数

  //事件处理程序 
     <div id="box">
         <input type="button" value="按钮" id="btn" onclick="showMes()">
         <input type="button" value="按钮2" id="btn2">
         <input type="button" value="按钮3" id="btn3">
         <a href="event.html" id="go">跳转</a>
      </div>
      <script>
         function showMes(event){
            alert("HTML事件处理程序")；
            event.stopPropagation();//阻止事件冒泡
         }
         function stopGoto(event){
            event.stopPropagation();
            event.preventDefalult();//阻止事件默认行为
}
         var btn2 = document.getElementById("btn2");
         var btn3 = document.getElementById("btn3");
         var go= document.getElementById("go");
         btn2.onclick = function(){
            alert("DOM 0级事件处理程序！")
         }
         //btn2.onclick = null;//删除事件

         //DOM 2级事件处理程序
         btn3.addEventListener("click", showMes, false);//要用click而不用onclick！
         btn3.addEventListener("click", function(){
            alert(this.value);//this,引用被触发的元素
         }, false);
         //btn3.removeEventListener("click", showMes, false);//删除事件
      </script>    

跨浏览器事件处理程序

//将其封装在对象eventUtil中
        var eventUtil = {
            //添加句柄
            addHandler:function(element, type, handler){
               if(element.addEventListener){
                  element.addEventListener(type, handler, false);//DOM2级事件处理程序
               }else if(element.attachEvent){
                  element.attachEvent("on"+type, handler);//因为DOM2里的type是没有‘on’的事件
               }else{
                  element["on" + type] = handler;
               }
            }
         }
        eventUtil.addHandler(btn3, "click", showMes);
        eventUtil.addHandler(go, "click", stopGoto);

---

3.事件对象

DOM中的事件对象

1. type属性 用于获取事件类型
2. target属性 用于获取事件目标
3. stopPropagation()方法 用于阻止事件冒泡
4. preventDefault()方法 阻止事件的默认行为

IE中的事件对象

1. type属性 获取事件类型
2. srcElement属性 获取事件目标

//
function showMes(enent){
   event = event || window.event;//主要解决IE8之前的浏览器兼容   
   var ele = event.target || event.srcElement;
   alert(ele);
   event.stopPropagation();//阻止事件冒泡
}

3. cancelBubble属性 阻止事件冒泡
4. returnValue属性 阻止事件默认行为

示例event.js：

//event.js
var eventUtil={
            // 添加句柄
            addHandler:function(element,type,handler){
               if(element.addEventListener){
                 element.addEventListener(type,handler,false);
               }else if(element.attachEvent){
                 element.attachEvent('on'+type,handler);
               }else{
                 element['on'+type]=handler;
               }
            },
            
          getEvent:function(event){
            return event?event:window.event;
          },
          getType:function(event){
            return event.type;
          },
          getElement:function(event){
            return event.target || event.srcElement;
          },
          preventDefault:function(event){
            if(event.preventDefault){
              event.preventDefault();
            }else{
              event.returnValue=false;
            }
          },
         stopPropagation:function(event){
           if(event.stopPropagation){
             event.stopPropagation();
           }else{
             event.cancelBubble=true;
           }
         }
  };

示例script.js

//script.js
window.onload=function(){
  var go=document.getElementById('go'),
      box=document.getElementById('box');

  eventUtil.addHandler(box,'click',function(){
    alert('我是整个父盒子');
  });

  eventUtil.addHandler(go,'click',function(e){
    //e=eventUtil.getEvent(e);
    e=e || window.event;
    alert(eventUtil.getElement(e).nodeName);
    eventUtil.preventDefault(e);
    eventUtil.stopPropagation(e);
  });
}；