DOM事件探索

前端開發 JavaScriptD DOM

---

1.事件流

事件流描述的是從頁面中接受事件的順序。
IE的事件流是事件冒泡流，而Netscape的事件流是事件捕獲流

• 事件冒泡：事件從最開始的最具體的元素接受，然後逐級向上傳遞，傳遞到最不具體的元素（節點，也就是文件）。打個比方就是從處理這件事的業務員傳遞到總經理的過程。
• 事件捕獲：接受過程和事件冒泡相反，最不具體元素最先接受事件然後傳遞到最具體元素。也就是總經理想起一個什麼事然後叫業務員辦這個事。

2.事件處理程式

1.HTML事件處理程式
2.DOMO級事件處理程式
3.DOM2級事件處理程式

DOM2級事件定義了兩個方法：用於處理指定和刪除事件處理程式的操作，addEventListener()和removeEventListener()。接受三個引數：要處理的事件名、作為事件處理程式的函式和布林值。

4.IE事件處理程式
attachEvent()新增事件
detachEvent()刪除事件
這兩個方法接收相同的兩個引數：事件處理程式名稱與事件處理函式

跨瀏覽器的事件處理程式：

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;
               }
            },
            // 刪除控制程式碼
            removeHandler:function(element,type,handler){
               if(element.removeEventListener){
                 element.removeEventListener(type,handler,false);
               }else if(element.detachEvent){
                 element.detachEvent('on'+type,handler);
               }else{
                 element['on'+type]=null;
               }
            },
          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;
           }
         }
  }

使用：

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);
  });

}

3.事件物件

1.DOM中的事件物件
(1)、type:獲取事件型別
(2)、target：事件目標
(3)、stopPropagation() 阻止事件冒泡
(4)、preventDefault() 阻止事件的預設行為
2.IE中的事件物件
(1)、type:獲取事件型別
(2)、srcElement：事件目標
(3)、cancelBubble=true阻止事件冒泡
(4)、returnValue=false阻止事件的預設行為