資訊專欄INFORMATION COLUMN
摘要：可以使用偵聽器或處理程序來預訂事件，以便事件發生時執行相應的代碼。響應某個事件的函數稱為事件處理程序或事件偵聽器?？梢詣h除通過級方法指定的事件處理程序。
JavaScript和HTML之間的交互是通過事件實現的。
事件：文檔或瀏覽器窗口中發生的一些特定的交互瞬間。
可以使用偵聽器（或處理程序來預訂事件），以便事件發生時執行相應的代碼。
1. 事件流事件流：從頁面中接收事件的順序。
IE和Netscape開發團隊提出了差不多是完全相反的事件流的概念。
IE: 事件冒泡流
Netscape： 事件捕獲流
1.1 事件冒泡事件冒泡（event bubbling）：事件開始時由最具體的元素（文檔中嵌套層次最深的那個節點）接收，然后逐級向上傳播到較為不具體的節點（文檔）。
1.2 事件捕獲事件捕獲（event capturing）:不太具體的節點應該更早接收到事件，最具體的節點應該最后接收到事件。
事件捕獲的用意在于在事件到達預定目標之前捕獲它。
1.3 DOM事件流“DOM2級事件”規定的事件流包括三個階段：
1. 事件捕獲階段 2. 處于目標階段 3. 事件冒泡階段2. 事件處理程序
事件是用戶或瀏覽器自身執行的某種動作。如：click，load，mouseover。
響應某個事件的函數稱為事件處理程序（或事件偵聽器）。
某個元素支持的每種事件，都可以使用一個與相應事件處理程序同名的HTML特性來指定。
單擊按鈕，顯示警告框。通過指定 onclick 特性并將一些JavaScript代碼作為它的值來定義。
在HTML中定義的事件處理程序可以包含要執行的具體動作，也可以調用在頁面其他地方定義的腳本。
事件處理程序中的代碼在執行時，有權訪問全局作用域中的任何代碼。
缺點：
存在時差問題。用戶在事件處理程序被解析之前就觸發了事件。
擴展事件處理程序的作用域鏈在不同的瀏覽器中會導致不同結果。
HTML和JavaScript代碼緊密耦合。
2.2 DOM0 級事件處理程序通過JavaScript指定事件處理程序的傳統方式，就是將一個函數賦值給一個事件處理程序屬性。
這種方法被稱為事件處理程序賦值，出現在第四代 Web 瀏覽器中。
每個元素（包括 window 和 document）都有自己的事件處理程序屬性，屬性通常全部小寫，如 onclick。將這種屬性的值設置為一個函數，就可以指定事件處理程序。
可以刪除通過 DOM0 級方法指定的事件處理程序。
btn.onclick = null; // 刪除事件處理程序2.3 DOM2 級事件處理程序
“DOM2級事件”定義了兩個方法，用于處理指定和刪除事件處理程序的操作：
addEventListener()
removeEventListener()
所有 DOM 節點都包含這兩個方法，它們接受3個參數：
要處理的事件名
作為事件處理程序的函數
一個布爾值：
true: 捕獲階段調用事件處理程序
false: 冒泡階段調用
為一個按鈕添加 onclick 事件處理程序：
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function() {
alert(this.id);
}, false);
使用 DOM2級方法添加事件處理程序的主要好處是可以添加多個事件處理程序。
用 addEventListener() 添加的事件處理程序只能使用 removeEventListener() 來移除，移除時傳入的參數與添加時的參數相同。所以，用 addEventListener() 添加的匿名函數將無法移除。
大多數情況下，都是將事件處理程序添加到事件流的冒泡階段，這樣可以最大限度地兼容各種瀏覽器。
2.4 IE 事件處理程序IE 實現了與 DOM 中類似的兩個方法：
attachEvent()
detachEvent()
接受兩個參數：事件處理程序名稱、事件處理程序函數
通過這種方法添加的事件處理程序會被添加到冒泡階段。
var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function() {
alert("clicked");
});
注意： attachEvent() 的第一個參數是“onclick”,而不是 addEventListener()方法中的“click"。
在IE中使用 attachEvent() 與使用 DOM0 級方法的主要區別在于事件處理程序的作用域。
DOM0 級方法：事件處理程序會在其所屬元素的作用域內運行
attachEvent()方法：事件處理程序會在全局作用域內運行，this 等于 window。
2.5 跨瀏覽器的事件處理程序創建一個方法 addHandler()，它屬于名叫EventUtil的對象視情況分別使用 DOM0級方法、 DOM2級方法或IE方法來添加事件。
addHandler()方法接收3個參數：
要操作的元素
事件名稱
事件處理程序函數
與其對應的方法是 removeHandler()，接收相同的參數。
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;
}
}
}
這兩個方法首先都會檢測傳入的元素中是否存在DOM2級方法。如果存在DOM2級方法，則使用該方法。如果存在的是IE的方法，則采取第二種方案。
像下面這樣使用EventUtil對象：
var btn = document.getElementById("myBtn");
var handler = function() {
alert("Clicked");
}
EventUtil.addHandler(btn, "click", handler);
EventUtil.removerHandler(btn, "click", handler);
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78450.html
摘要：指定事件處理程序指定事件處理程序主要有兩種方式級事件處理程序級事件處理程序。添加事件處理程序注意這里是哦或移除事件處理程序使用移除事件處理程序的條件與方法相同必須提供相同的參數，從而添加的匿名函數也無法被移除。 今天看書又看到事件，遂決定小總結一下~ JavaScript與HTML之間的交互是通過事件實現的。事件，就是文檔或瀏覽器窗口中發生的一些特定的交互瞬間?？梢允褂帽O聽器（事件處...
摘要：指定事件處理程序指定事件處理程序主要有兩種方式級事件處理程序級事件處理程序。添加事件處理程序注意這里是哦或移除事件處理程序使用移除事件處理程序的條件與方法相同必須提供相同的參數，從而添加的匿名函數也無法被移除。 今天看書又看到事件，遂決定小總結一下~ JavaScript與HTML之間的交互是通過事件實現的。事件，就是文檔或瀏覽器窗口中發生的一些特定的交互瞬間?？梢允褂帽O聽器（事件處...
摘要：事件流級事件規定的事件流包括三個階段事件捕獲階段處于目標階段和事件冒泡階段。事件處理程序的名字以開頭，如等。如使用級方法指定的事件處理程序被認為是元素的方法。 事件流 事件流描述的是從頁面中接收事件的順序。IE的事件流是事件冒泡流，而Netscape Communicator的事件流是事件捕獲流。 事件冒泡 即事件開始時由最具體的元素接收，然后逐級向上傳播到較為不具體的節點。如： ...
摘要：事件流描述的是從頁面中接受事件的順序。事件流中的事件流是事件冒泡流。順序是從外向里級事件規定的事件流包括三個階段事件捕獲階段處于目標階段和事件冒泡階段，其中到是處于目標階段，如圖所示。添加的事件會被逆序執行。 HTML和js之間的交互是通過事件實現的。 事件流描述的是從頁面中接受事件的順序。 事件流 IE中的事件流是事件冒泡流。順序是從里向外 eg：div-body-html-...
閱讀 2231·2021-11-22 14:56
閱讀 9834·2021-09-08 10:45
閱讀 1966·2019-08-30 13:54
閱讀 2857·2019-08-29 16:54
閱讀 2003·2019-08-29 14:20
閱讀 1772·2019-08-29 12:25
閱讀 1851·2019-08-29 12:17
閱讀 1048·2019-08-23 18:29
