HTML 事件(一) 事件的介紹

　　本篇主要介紹HTML中的事件知識：事件相關術語、DOM事件規范、事件對象。

其他事件文章

1. HTML 事件(一) 事件的介紹

2. HTML 事件(二) 事件的注冊與注銷

3. HTML 事件(三) 事件流、事件委托

4. HTML 事件(四) 模擬事件操作

 

目錄

1. 事件相關術語：介紹事件相關的術語；如：事件類型、事件名稱、事件目標等等。

2. DOM事件規范：介紹W3C目前定義的三種DOM事件規范：0、2、3級。

3. 事件類型：介紹了HTML目前的事件類型；如：UIEvent、FocusEvent、MouseEvent、WheelEvent、KeyboardEvent、CompositionEvent。

4. Event 事件對象：表示事件發生時的狀態，比如事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態等等。

 

1. 事件相關術語

事件可表示為動作。以鼠標為例，移動、點擊、懸停都是一種動作，也是事件。

事件類型(event type)：表示事件的類型。如：MouseEvent(鼠標事件)、KeyboardEvent(鍵盤事件)。

事件名稱(event name)：表示事件的名稱。如：click(單擊)、dblclick(雙擊)。

事件目標(event target)：表示與發生事件相關的目標對象。

事件處理程序(event handler)：指處理事件的函數，即發生事件時，需調用的函數。

事件對象(event object)：事件發生時，表示事件的狀態，比如事件發生的目標、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態等等。事件觸發時，通過參數傳遞給事件處理程序。

HTML元素中的事件處理程序屬性名稱是以"on"為前綴，緊跟着事件的名稱。如：onclick、onload。

 

2. DOM事件規范

　　W3C目前定義了三種DOM事件規范：0、2、3級。

2.1 DOM Level 0 Events

說明：0級DOM事件規范；最初的HTML文檔事件規范，由Netscape Navigator 3 或 微軟IE 3實現。

規范簡介：

①定義了元素的基本事件。如：click、load等；

②以元素的屬性方式調用事件。如：<button onclick="fn()"></buttom> 或者 htmlElement.onclick=function(){};

 

2.2  DOM Level 2 Events

說明：2級DOM事件規范；最后更新於2000年11月13日。

地址：https://www.w3.org/TR/DOM-Level-2-Events/

文檔地址：https://www.w3.org/TR/DOM-Level-2-Events/DOM2-Events.pdf

規范簡介：

①制定事件流，包含三個階段：事件捕獲階段、處於目標階段和事件冒泡階段。

②制定addEventListener()、removeEventListener()、dispatchEvent()等方法對元素事件進行操作。 [IE9之前的版本對應的為：attachEvent()、detachEvent()、fireEvent()]；

③制定DocumentEvent接口，包含：createEvent()方法；

④制定Event對象，包含bubbles、cancelable、currentTarget、eventPhase、target、timeStamp、type屬性，以及preventDefault()、stopPropagation()方法；

⑤擴展事件模塊：UIEvent、MouseEvent、MutationEvent、HTMLEvent。

⑥移除KeyEvents。

 

2.3  DOM Level 3 Events

說明：3級DOM事件規范；最后更新於2015年12月15日。

地址：https://www.w3.org/TR/DOM-Level-3-Events/

主要規范：

①制定事件處理程序的觸發排序規則：根據addEventListener()方法的注冊順序依次觸發；

②事件流現在包含Window對象；

③修改resize事件為不可冒泡，修改mousemove事件為可取消默認操作；

④Event事件對象添加defaultPrevented屬性、stopImmediatePropagation()方法，type屬性將區分事件名稱的大小寫(DOM2不區分)；

⑤棄用MutationEvent事件模塊，棄用DOMFocusIn和DOMFocusOut事件；

⑥添加新的事件模塊：CustomEvent、FocusEvent、KeyboardEvent、CompositionEvent、WheelEvent；UIEvent模塊添加：focus、blur事件；MouseEvent模塊添加：dblclick事件。

  

3. 事件類型

每一個事件都有歸屬的事件類型，不同的事件類型具有不同的信息。

3.1 UIEvent Types ：用戶界面事件類型；當用戶與頁面上的元素交互時觸發

包含事件：load、unload、abort、error、select、resize、scroll。

擴展閱讀：https://www.w3.org/TR/DOM-Level-3-Events/#events-uievents

 

3.2 FocusEvent ：焦點事件； 當元素獲得或失去焦點時觸發

包含事件：blur、focus、focusin、focusout。

擴展閱讀：https://www.w3.org/TR/DOM-Level-3-Events/#events-focusevent

 

3.3 MouseEvent Types ：鼠標事件類型；當鼠標在頁面上執行操作時觸發

包含事件：click、dblclick、mousedown、mouseenter、mouseleave、mousemove、mouseout、mouseover、mouseup。

擴展閱讀：https://www.w3.org/TR/DOM-Level-3-Events/#events-mouseevents

 

3.4 WheelEvent Types ：滾輪事件類型；當鼠標滾輪時觸發

包含事件：wheel。

擴展閱讀：https://www.w3.org/TR/DOM-Level-3-Events/#events-wheelevents

 

3.5 KeyboardEvent Types ：鍵盤事件類型；當鍵盤在頁面上執行操作時觸發

包含事件：keydown、keyup、keypress。

擴展閱讀：https://www.w3.org/TR/DOM-Level-3-Events/#events-keyboardevents

 

3.6 CompositionEvent Types ：復合事件類型；當為IME輸入字符時觸發

IME：輸入法編輯器(Input Method Editor)。

包含事件：compositionstart、compositionupdate、compositionend。

擴展閱讀：https://www.w3.org/TR/DOM-Level-3-Events/#events-compositionevents

 

 

4. Event 事件對象

說明：Event 對象表示事件發生時的狀態，比如事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態等等。

獲取方式：事件觸發時的第一個參數 或者 事件觸發時調用window.event對象。

document.getElementById('btn').addEventListener('click', function(e){
    console.log(window.event==e); // => true ：觸發時兩者是一樣

冒泡事件：當子元素觸發某一事件時，父元素會觸發相同時間(事件為允許冒泡)。

阻止后續處理程序：通過addEventListener()方法可以給元素的同一事件注冊多個處理程序，在某個事件中調用了stopImmediatePropagation() 方法后，后面已經注冊的處理程序將不會執行。比如，某個元素在click事件上注冊了3個函數，在第2個函數上調用了stopImmediatePropagation()方法，第3個函數不會執行。

擴展閱讀：https://developer.mozilla.org/en-US/docs/Web/API/Event

4.1 實例屬性

 readonly boolean bubbles ：只讀，獲取此事件是否冒泡。

 readonly boolean cancelable ：只讀，獲取此事件是否可被撤銷。true：事件可撤銷。可調用preventDefault()取消后續的默認動作。flase：事件不可撤銷。

 readonly Object currentTarget ：只讀，獲取正在處理此事件的對象，可以為Element、Document對象等等。

 readonly boolean defaultPrevented ：只讀，表示是否已經調用過了preventDefault()。true：已經調用過了preventDefault()方法。

 readonly int eventPhase ：只讀，表示事件的處理階段：0表示沒有正在處理，1表示捕獲階段，2表示目標階段，3表示冒泡階段。

 readonly Object target ：只讀，獲取觸發此事件的對象。

 readonly long timeStamp ：只讀，獲取事件創建的時間。eg：console.log(e.timeStamp); // => 1455034313689

 readonly string type ：只讀，獲取事件名稱（不包含前綴on，如：click）

 readonly boolean isTrusted ：只讀，表示此事件是否由瀏覽器生成。true：由瀏覽器生成。false：通過JS創建，如：dispatchEvent()。

 

4.2 實例方法

 void preventDefault() ：終止事件的后續默認操作(事件要可撤銷，即cancelable屬性為true)。如：checkbox的click事件，執行這代碼，元素不會被勾選和取消勾選。

document.getElementById('ckbox').onclick=function(e){
    e.preventDefault(); // checkbox不會被勾選和取消勾選
};

 void stopImmediatePropagation() ：阻止當前事件的冒泡行為並且阻止此元素上相同類型事件的后續處理函數。

document.body.onclick=function(e){
    console.log('body-click');                
};

document.getElementById('btn').addEventListener('click', function(e){
    console.log('btn-click-1');
});

document.getElementById('btn').addEventListener('click', function(e){
    console.log('btn-click-2');
    // stopImmediatePropagation()方法將阻止當前事件的冒泡行為並且阻止此元素上相同類型事件的后續處理函數;
    // 將會輸出：btn-click-1、btn-click-2
    // 若取消stopImmediatePropagation()方法，將會輸出：btn-click-1、btn-click-2、btn-click-3、body-click
    e.stopImmediatePropagation(); 
});

document.getElementById('btn').addEventListener('click', function(e){
    console.log('btn-click-3');
});

 void stopPropagation() ：阻止當前事件的冒泡行為。

document.body.onclick = function (e) {
    console.log('body的click事件');
};
document.getElementById('btn').onclick = function (e) {
    console.log('btn的click事件');
    e.stopPropagation(); // 阻止此事件后續的冒泡行為，原先點擊此事件，會觸發body的相同類型事件
};

 

4.3 currentTarget 與 target 屬性的區別

currentTarget ：獲取正在處理此事件的對象。

target ：獲取觸發此事件的對象。

冒泡階段時兩者的區別： 假設body和Button元素都注冊了click事件；當點擊Button元素時，body的click事件也會觸發，此時在body的click事件內，currentTarget指向body元素，target指向Button元素。

示例：點擊Button元素時的顯示結果

document.body.onclick = function (e) {
    console.log(e.currentTarget); // 指向body元素
    console.log(e.target); // 若是冒泡事件時，指向最開始觸發的元素。否則為元素自身。
};

document.getElementById('btn').onclick = function (e) {
    console.log(e.currentTarget);
    console.log(e.target); 
};

 

End

Web開發之路系列文章

菜單加載中...