首頁 >web前端 >js教程 >對js中事件模型的解析

對js中事件模型的解析

不言原創: 2018-07-14 14:49:311343瀏覽

這篇文章主要介紹了關於JavaScript中的事件模型，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

0. 事件與事件流

事件是瀏覽器與文件互動的瞬間，例如點擊按鈕、填寫表格等操作，它是Javascript與HTML之間溝通的橋樑。 DOM是樹狀結構，如果同時給父節點都綁定事件時，當觸發子節點的時候，這兩個事件的發生順序就牽涉到事件流的內容，它描述的是頁面接受時間的順序。事件流程描述的是從頁面接收事件的順序，但比較有趣的是IE和Netscape開發團隊居然提出了差不多完全相反的概念。 IE的事件流是事件冒泡流，而Netscape Communicator的事件流是事件捕獲流。

因此事件流主要分為兩種：事件冒泡與事件擷取。

IE的事件流叫做事件冒泡，即事件開始時由最具體的元素（文檔中嵌套層次最深的那個節點）接收，然後逐級向上傳播到較為不具體的節點（文檔）。 Netscape團隊提出的另一個事件流稱為事件擷取（event capturing)，事件捕捉的想法是不太具體的節點應該更早接收到事件，而最具體的節點應該最後接收到事件。捕獲的用意在於在事件到達預定目標前捕獲它。

DOM2級事件規定的事件流包括三個階段:事件擷取階段、處於目標階段、事件冒泡階段。首先發生的是事件捕獲，為截獲事件提供了機會。然後是實際的目標接收到事件。最後一個階段是冒泡階段，可以在這個階段對事件做出反應。

1. DOM0等級事件模型

DOM0等級事件模型是早期的事件模型，又稱為原始事件模型，在這個模型中，事件不會傳播，即沒有事件流的概念。事件綁定監聽函數較為簡單，要使用Javascript指定事件處理程序，首先必須取得一個要操作的物件的參考。

每個元素（包括window和document）都有自己的事件處理屬性，這些屬性通常全部小寫，如onclick。將此屬性設為函數就可以指定事件處理程序：

 btn = document.getElementById("myBtn"= "Clicked!"

//HTML事件处理程序<form method="post">
    <input type="text" name="username" value="">
    <input type="button" value="Username" onclick = "alert(username.value)">
</form>

## 2 . DOM2級事件模型

在此模型中，分為三個過程：事件擷取階段、處於目標階段7事件冒泡階段；

#事件擷取階段(capturing phase)。事件從document一直向下傳播到目標元素, 依次檢查經過的節點是否綁定了事件監聽函數，如果有則執行。
事件處理階段(target phase)。事件到達目標元素, 觸發目標元素的監聽函數。
事件冒泡階段(bubbling phase)。事件從目標元素冒泡到document, 依序檢查經過的節點是否綁定了事件監聽函數，如果有則執行。

DOM2級定義了兩個方法，用於處理指定和刪除事件處理程序的操作，addEventListener()和removeEventListener()。所有DOM節點都包含這兩個方法，並且有三個參數，要處理的事件名稱、作為事件處理程序的函數和一個布林值。若要在click事件新增事件處理程序，可用：

var btn = document.getElementById("myBtn");
btn.addEventListener("click", functioin() {
    alert(this.id);
}, false);
btn.addEventListener("click", function() {
    alert("Hello Kid");
}, false);

此時執行順序為順序執行："myBtn" "Hello kid"。 IE中的話執行順序正好相反。

移除事件監聽函數的方式如下：

var btn = document.getElementById("myBtn");var handler = function() {
    alert(this.id);
};

"click", handler, btn.removeEventListener("click", handler, );

這裡只能用函數表達式的形式作為事件處理程序，因為removeEventListenerenerenerenerenerenerenerener ()移除的時候要求傳入的參數與新增應用程式時所使用的參數相同。而透過匿名函數新增的事件監聽函數將無法被移除。

3. IE中的事件模型

IE中使用與DOM類似的兩個方法：attachEvent()和detachEvent()。這兩個方法接受相同的兩個參數，事件處理程序名稱和事件處理程序函數。由於IE8及更早的版本只支援事件冒泡，所以透過attachEvent()新增的事件處理程序都會被加入冒泡階段。如果使用attachEvent()為按鈕新增事件處理程序可用：

var btn = document.getElementById("myBtn");var handler = function() {
    alert(this.id);
};
btn.attachEvent("onclick", handler);//添加事件处理程序btn.detachEvent("onclick", handler);//删除事件处理程序

#4. 事件物件##DOM中的事件物件

cancelable (Boolean) 表明是否可以取消事件的默认行为
bubbles （Boolean）表明事件是否冒泡
perventDefault()取消事件的默认行为。如果cancelable为true，则可以使用这个方法
stopPropagation()取消事件的进一步捕获或冒泡。如果bubbles为true，则可以使用这个方法。

IE中的事件对象

type表示被触发的事件类型
srcElement表示事件的目标
cancelBubble （Boolean）默认是false，将其设为true就可以取消事件冒泡
returnValue (Boolean) 默认是true，将其设置为false就可以取消事件的默认行为

有了上面的事件对象，就可以写出跨浏览器的事件对象封装成事件包裹了。

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){                 //DOM2
            element.removeEventListener(type, handler, false);
        } else if (element.detachEvent){                  //IE
            element.detachEvent("on" + type, handler);
        } else {
            element["on" + type] = null;                  //DOM0        }
    },

    getEvent: function(event){        
    return event ? event : window.event;
    },

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

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

對js中事件模型的解析

相關文章