學習JavaScript事件流與事件處理程序_javascript技巧
- WBOY原創
- 2016-05-16 15:18:221098瀏覽
本文全篇介紹了JavaScript事件流和事件處理程序，分享給大家供大家參考，具體內容如下
一、事件流
事件流描述的是從頁面中接收事件的順序。 IE的事件流是事件冒泡流，而Netscape Communicator的事件流是事件捕獲流。
二、事件冒泡
即事件開始時由最具體的元素接收，然後逐級向上傳播到較為不具體的節點。如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <div>Click</div> </body> </html>
當點擊了頁面中的div元素，那麼這個click事件會按照以下順序傳播：
- div元素
- body元素
- html元素
- document物件
三、事件擷取
事件捕獲的想法是最具體的節點應該最後接收到事件。事件捕獲的用意在於事件到達目標之前捕獲它。
當點擊了頁面中的div元素，那麼這個click事件則會按照以下順序傳播：
- document物件
- html標籤
- body標籤
-
div標籤
雖然規範要求事件應該從document物件開始傳播，但瀏覽器一般都是從window物件開始捕捉事件的。因為舊版瀏覽器不支持，所以一般都會使用事件冒泡。
四、DOM事件流
「DOM2級事件」規定的事件流包含三個階段：事件擷取階段、處於目標階段和事件冒泡階段。
在DOM事件流中，實際的目標在捕獲階段不會接收事件。就是說在捕捉階段，事件從document到html再到body後就停止了。下一個階段是「處於目標」階段，於是事件在div中發生，並在事件處理中被看成是冒泡階段的一部分。然後，冒泡階段發生。 IE8及更早的版本不支援DOM事件流，瀏覽器在擷取階段觸發事件物件上的事件，結果就是有兩個機會在目標物件上面操作事件。
五、事件處理程序
事件就是使用者或瀏覽器本身執行的某種動作；事件處理程序（或事件偵聽器）就是回應某個事件的函數。事件處理程序的名字以「on」開頭，如onload、onclick等。
六、HTML事件處理程序
若要在按鈕被點選時執行一些js程式碼，可以這樣寫：
<div onclick="alert('Clicked')">Click</div>
注意：不能在其中使用未經轉義的HTML語法字元。
也可以呼叫在頁面中其他地方定義的腳本：
<script>
function showMessage () {
document.write("fdas");
}
</script>
<input type="button" value="Click Me" onclick="showMessage()" />
事件處理程序中的程式碼執行時，有權存取全域作用域中的任何程式碼。
這樣使用會建立一個封裝著的元素屬性值的函數。這個函數有一個局部變數event，也就是事件物件：
<input type="button" value="Click Me" onclick="alert(event.type)" />
其中，this值等於事件的目標元素，如：
<input type="button" value="Click Me" onclick="alert(this.value)" />
HTML事件處理程序有許多問題，所以應該使用js指定的事件處理程序
七、DOM0級事件處理程序
要使用js指定事件處理程序，首先必須取得一個要操作的物件的參考。
每個元素都有自己的事件處理程序屬性，這些屬性通常全部小寫，如onclick。如：
<input type="button" value="Click Me" id="btn" />
<script>
document.querySelector("#btn").onclick = function() {
console.log("hello");
}
</script>
使用DOM0級方法指定的事件處理程序被認為是元素的方法。因此，這時候的事件處理程序是在元素的作用域中運作的；也就是this引用當前元素：
<input type="button" value="Click Me" id="btn" />
<script>
document.querySelector("#btn").onclick = function() {
console.log(this.type);
}
</script>
以上述這種方式加入的事件處理程序會在事件流的冒泡階段被處理。
刪除透過DOM0級方法指定的事件處理程序：
btn.onclick = null;
八、DOM2級事件處理程序
addEventListener()
此方法接收三個參數：要處理的事件名稱、事件處理程序函數和布林值；布林值如果是true，表示在擷取階段呼叫事件處理程序；如果是false，表示在冒泡階段呼叫事件處理程序。如：
var btn = document.getElementById("btn");
btn.addEventListener("click", function () {
console.log(this.id);
})
也可以為此按鈕新增多個事件處理程序，如：
var btn = document.getElementById("btn");
btn.addEventListener("click", function () {
console.log(this.id);
})
btn.addEventListener("click", function () {
console.log(this.value);
})
removeEventListener()
var btn = document.getElementById("btn");
function info () {
console.log(this.value);
}
btn.addEventListener("click", info);
btn.addEventListener("click", function () {
console.log(this.id);
});
btn.addEventListener("click", function valueAndId () {
console.log(this.value + " " + this.id);
});
btn.removeEventListener("click", info); //有效
btn.removeEventListener("click", function () {
console.log(this.id);
}); //无效
btn.removeEventListener("click", valueAndId); //报错无效
In most cases, event handlers are added to the bubbling phase of the event flow to maximize compatibility with various browsers.
The above is all about JavaScript event streams and event handlers. I hope it will be helpful to everyone's learning.