JavaScript:事件流與事件處理程序

原創

HEYLeonL

2020-02-21 04:58

*事件**：就是文檔或瀏覽器窗口中發生的一些特定的交互瞬間。

事件流

事件流：描述的是從頁面中接收事件的順序。IE和Netscape提出了完全相反的事件流的概念。IE的事件流是事件冒泡流，而Netscape的事件流是事件捕獲流。

事件冒泡

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

以下面的HTML頁面爲例：

<!DOCTYPE html>
<html>
<head>
    <title>事件冒泡</title>
</head>
<body>
    <div id="myDiv">Click Me</div>
</body>
</html>

事件冒泡過程：

事件捕獲

Netscape提出的另一種事件流稱爲事件捕獲。即不太具體的節點應該更早接收到事件，而最具體的節點應該最後接收到事件。

事件捕獲的過程：

DOM事件流

“DOM2級事件”規定的事件流包括三個階段：事件捕獲階段、處於目標階段、事件冒泡。

事件處理程序

事件處理程序(事件偵聽器)：響應某個事件的函數。事件處理程序的名字以“on”開頭，因此click事件的事件處理程序就是onclick,load事件的時間處理程序就是onload。

HTML事件處理程序

某個元素支持的每種事件，都可以使用一種響應事件處理程序同名的HTML特性來指定。這個特性的值應該是能夠執行的JavaScript代碼。

<input type="button" value="click me" οnclick="alert('點擊')">

// 使用雙引號
<input type="button" value="click me" οnclick="alert(&quot;點擊&quot;)">

在HTML中定義的事件處理程序可以包含要執行的具體動作，也可以是調用在頁面其他地方定義的腳本：

<script type="text/javascript">
    function showMsg() {
        alert("hello javascript");
    }
</script>

<input type="button" value="點擊" onclick="showMsg();">

單擊按鈕就會調用showMsg()函數。事件處理程序中的代碼在執行時，有權訪問全局作用域中的任何代碼。

DOM0級事件處理程序

每個元素都有自己的事件處理程序屬性，將這種屬性的值設置爲一個函數，就可以指定時間處理程序：

 var btn = document.getElementById("myBtn");
btn.onclick = function () {
    alert("Clicked");
}

刪除通過DOM0級方法指定的事件處理程序

btn.onclick = null;

DOM2級事件處理程序

“DOM2級事件”定義兩個方法：addEventListener()和removeEventListener()。

所有DOM節點都包含着兩個方法，並且它們都接受3個參數：要處理的事件名、作爲事件處理程序的函數和一個布爾值。布爾值參數爲true，表示在捕獲階段調用事件處理程序；爲false，表示在冒泡階段調用事件處理程序。

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

使用DOM2級方法添加事件處理程序的好處是可以添加多個事件處理程序。

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

通過addEventListener()添加的事件處理程序只能使用removeEventListener()移除，移除時使用的參數與添加時使用的參數相同。這意味着addEventListener添加的匿名函數無法移除。

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

// 執行其他任務

btn.removeEventListener("click", function () {
    alert(this.id);
}, false);  // 無效

移除事件處理方法：

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

// 執行其他任務

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

IE事件處理程序

IE中有兩個與DOM類似的方法：attachEvent()和detachEvent()。

添加事件處理程序：

var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function () {
    alert("Clicked");
});

與DOM0級方法的區別：DOM0級方法下，事件處理程序與其所屬元素的作用域內運行；在使用attachEvent()方法下，事件處理程序會在全局作用域中運行，因此this等於window。

移除事件處理程序：

var btn = document.getElementById("myBtn");
var handler = function () {
    alert("Clicked");
};
btn.attachEvent("onclick", handler);

// ...

btn.detachEvent("onclick", handler);

跨瀏覽器的事件處理程序

var EventUtil = {

    addHandler: function (element, type, handler) {
        if (element.addEventListener) {     // DOM2級
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {   // IE
            element.attachEvent("on" + type, handler);
        } else {    // DOM0級
            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;
        }
    }
};

上面的EventUtil用於處理瀏覽器之間的差異。

EventUtil的使用：

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

EventUtil.addHandler(btn, "click", handler);

// do something

EventUtil.removeHandler(btn, "click", handler);