HTML 事件(一) 事件的介紹

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

其餘事件文章

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

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

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

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

 

目錄

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

2. DOM事件規範：介紹W3C目前定義的三種DOM事件規範：0、二、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、二、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-一、btn-click-2
    // 若取消stopImmediatePropagation()方法，將會輸出：btn-click-一、btn-click-二、btn-click-三、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開發之路系列文章

菜單加載中...