DOM事件處理

一、事件流

事件流描述的是從頁面中接受事件的順序。

IE的事件流是事件冒泡流，而Netscape的事件流是事件捕獲流

1、事件冒泡

事件冒泡，即事件最開始由最具體的元素(文檔中嵌套層次最深的那個節點)接收，然後逐級向上轉播至最不具體的節點(文檔)。

2、事件捕獲

事件捕獲的思想是不太具體的節點應該更早接收到事件，而最具體的節點最後接收到事件。

二、事件處理程式

1、HTML事件處理程式

<input type="button" value="按鈕" id="btn" onclick="showMes()">
           

2、DOM0級事件處理程式

btn.onclick=function(){};
           

3、DOM2級事件處理程式

DOM2級事件定義了兩個方法：用于處理指定和删除事件處理程式的操作：addEventListener()和removeEventListener()。它們都接收三個參數：要處理的事件名、作為事件處理程式的函數和一個布爾值。

type:不加on

4、IE事件處理程式

attachEvent()添加事件

detachEvent()删除事件

這兩個方法接收相同的兩個參數：事件處理程式名稱與事件處理函數

5、跨浏覽器的事件處理程式

// 添加句柄
            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;
               }
            },
           

三、事件對象

事件對象event

1、DOM中的事件對象

(1)、type:擷取事件類型

(2)、target：事件目标

(3)、stopPropagation() 阻止事件冒泡

(4)、preventDefault() 阻止事件的預設行為

2、IE中的事件對象

(1)、type:擷取事件類型

(2)、srcElement：事件目标

(3)、cancelBubble=true阻止事件冒泡

(4)、returnValue=false阻止事件的預設行為

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