HTML 頁面的生命周期、HTML 事件

1、頁面生命周期

HTML

頁面的生命周期有以下三個重要事件，每個事件都有特定的用途

DOMContentLoaded
load ：浏覽器已經加載了所有的資源（圖像，樣式表等）。可以在此事件觸發時獲得圖像的大小（如果沒有被在 HTML/CSS 中指定）
beforeunload / unload

1.1 DOMContentLoaded

DOMContentLoaded 由 document 對象觸發。可以使用 addEventListener 來監聽它：

document.addEventListener("DOMContentLoaded", ready);

舉個例子

<script>
  function ready() {
    alert('DOM is ready');

    // image is not yet loaded (unless was cached), so the size is 0x0
    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
  }

  document.addEventListener("DOMContentLoaded", ready);
</script>

<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">

在這個例子中 DOMContentLoaded 在 document 加載完成後就被觸發，無需等待其他資源的載入，是以 alert 輸出的圖像的大小為 0。這麼看來 DOMContentLoaded 似乎很簡單，DOM 樹建構完畢之後就運作該事件，不過其實存在一些陷阱。就是一些 <img> 和樣式表等外部資源可能并沒有下載下傳完畢。

DOMContentLoaded 和 Javascript

當浏覽器在解析 HTML 頁面時遇到了 <script>...</script> 标簽，将無法繼續建構DOM樹（譯注："UI渲染線程" 與 "JS引擎" 是互斥的，當 JS引擎執行時UI線程會被挂起），必須立即執行腳本。是以 DOMContentLoaded 有可能在所有腳本執行完畢後觸發。

外部腳本 ( 帶src的 ) 的加載和解析也會暫停 DOM 樹建構，是以 DOMContentLoaded 也會等待外部腳本。

script 中 defer 與 async 的異同

共同點：兩者都告訴浏覽器可以繼續處理頁面，并在“背景”加載腳本，然後在加載時運作腳本。是以腳本不會阻止DOM建構和頁面呈現。

不同點：如果一個頁面中有多個帶有defer修飾符的script标簽，它們會按照順序進行加載并且在DOMContentLoaded之前執行；async修飾符則不會遵循順序，它什麼時候加載完成什麼時候執行(有可能在DOMContentLoaded之前，也有可能在DOMContentLoaded之後)。

使用場景：defer一般用在腳本互相依賴性的時候，能保證執行順序；而async比較适用于完全獨立的腳本。

不過有兩個例外是帶 async 和 defer 的外部腳本，他們告訴浏覽器繼續解析而不需要等待腳本的執行，是以使用者可以在腳本加載完成前可以看到頁面，有較好的使用者體驗。async 和 defer 屬性僅僅對外部腳本起作用，并且他們在 src 不存在時會被自動忽略。它們都告訴浏覽器繼續處理頁面上的内容同時在背景加載腳本，當腳本加載完畢後再執行。是以腳本不會阻塞DOM樹的建構和頁面的渲染。( 譯注：其實這裡是不對的，帶有 async 和 defer 的腳本的下載下傳是和 HTML 的下載下傳與解析是異步的，但是 js 的執行一定是和 UI線程是互斥的，像下面這張圖所示，async 在下載下傳完畢後的執行會阻塞 HTML 的解析 )

他們有兩處不同：

async	defer
順序	帶有 async 的腳本是優先執行先加載完的腳本，他們在頁面中的順序并不影響他們執行的順序。	帶有defer的腳本按照他們在頁面中出現的順序依次執行。
DOMContentLoaded	帶有async的腳本也許會在頁面沒有完全下載下傳完之前就加載，這種情況會在腳本很小或本緩存，并且頁面很大的情況下發生。	帶有defer的腳本會在頁面加載和解析完畢後執行，剛好在DOMContentLoaded之前執行。

是以 async 用在那些完全不依賴其他腳本的腳本上。

DOMContentLoaded 與 CSS(樣式表)

外部樣式表并不會影響 DOM，是以 DOMContentLoaded 并不會被他們阻塞。

不過仍然有一個陷阱：如果在樣式後面有一個内聯腳本，那麼腳本必須等待樣式先加載完。

( 譯注：簡單來說，JS 因為有可能會去擷取 DOM 的樣式，是以 JS 會等待樣式表加載完畢，而 JS 是阻塞 DOM 的解析的，是以在有外部樣式表的時候，JS 會一直阻塞到外部樣式表下載下傳完畢 )

<link type="text/css" rel="stylesheet" href="style.css">
<script>
  // the script doesn't not execute until the stylesheet is loaded
  // 腳本直到樣式表加載完畢後才會執行。
  alert(getComputedStyle(document.body).marginTop);
</script>

發生這種事的原因是腳本也許會像上面的例子中所示，去得到一些元素的坐标或者基于樣式的屬性。是以他們自然要等到樣式加載完畢才可以執行。上面示例中：DOMContentLoaded 需要等待腳本的執行，腳本又需要等待樣式的加載。

浏覽器的自動補全

Firefox、Chrome 和 Opera 會在 DOMContentLoaded 執行時自動補全表單。例如，如果頁面有登入的界面，浏覽器記住了該頁面的使用者名和密碼，那麼在 DOMContentLoaded 運作的時候浏覽器會試圖自動補全表單（如果使用者設定允許）。

是以如果 DOMContentLoaded 被一個需要長時間執行的腳本阻塞，那麼自動補全也會等待。你也許見過某些網站（如果你的浏覽器開啟了自動補全）--- 浏覽器并不會立刻補全登入項，而是等到整個頁面加載完畢後才填充。這就是因為在等待DOMContentLoaded事件。

defer 是會阻塞 DOMContentLoaded 的，被 defer 的腳本要在DOMContentLoaded 觸發前執行，是以如果HTML很快就加載完了（先不考慮 CSS 阻塞 DOMContentLoaded 的情況），而 defer 的腳本還沒有加載完，浏覽器就會等，等到腳本加載完，執行完，再觸發 DOMContentLoaded，放上一張圖（取自在 devTool 下分析自己寫的一個頁面）

HTML很快就加載和解析完畢（CSS 在這裡是動态加載的，不阻塞 DOMContentLoaded），jQuery 和main.js 的腳本是 defer 的， DOMContentLoaded（藍線）一直在等，等到這兩個腳本下載下傳完并執行完，才觸發了 DOMContentLoaded。從這個角度看來，defer 和把腳本放在 </body> 前真是沒啥差別，隻不過 defer 腳本位于head 中，更早被讀到，加載更早，而且不擔心會被其他的腳本推遲下載下傳開始的時間。

document.readyState

如果在整個頁面加載完畢後設定 DOMContentLoaded 會發生什麼呢？啥也沒有，DOMContentLoaded不會被觸發。

有一些情況我們無法确定頁面上是否已經加載完畢，比如一個帶有async的外部腳本的加載和執行是異步的（注：執行并不是異步的-_-）。在不同的網絡狀況下，腳本有可能是在頁面加載完畢後執行也有可能是在頁面加載完畢前執行，我們無法确定。是以我們需要知道頁面加載的狀況。

document.readyState 屬性給了我們加載的資訊，有三個可能的值：

loading 加載 - document 仍在加載。
interactive 互動 - 文檔已經完成加載，文檔已被解析，但是諸如圖像，樣式表和架構之類的子資源仍在加載。
complete - 文檔和所有子資源已完成加載。狀态表示 load 事件即将被觸發。

是以可以檢查

document.readyState

的狀态，如果沒有就緒可以選擇挂載事件，如果已經就緒了就可以直接立即執行。像這樣：

function work() { /*...*/ }

if (document.readyState == 'loading') {
  document.addEventListener('DOMContentLoaded', work);
} else {
  work();
}

每當文檔的加載狀态改變的時候就有一個 readystatechange 事件被觸發，是以我們可以列印所有的狀态。

// current state
console.log(document.readyState);

// print state changes
document.addEventListener('readystatechange', () => console.log(document.readyState));

readystatechange 是追蹤頁面加載的一個可選的方法，很早之前就已經出現了。不過現在很少被使用了，為了保持完整性還是介紹一下它。

readystatechange 的在各個事件中的執行順序又是如何呢？

<script>
  function log(text) { /* output the time and message */ }
  log('initial readyState:' + document.readyState);

  document.addEventListener('readystatechange', () => log('readyState:' + document.readyState));
  document.addEventListener('DOMContentLoaded', () => log('DOMContentLoaded'));

  window.onload = () => log('window onload');
</script>

<iframe src="iframe.html" onload="log('iframe onload')"></iframe>

<img src="http://en.js.cx/clipart/train.gif" id="img">
<script>
  img.onload = () => log('img onload');
</script>

輸出如下:

[1] initial readyState:loading
    [2] readyState:interactive
    [2] DOMContentLoaded
    [3] iframe onload
    [4] readyState:complete
    [4] img onload
    [4] window onload

方括号中的數字表示他們發生的時間，真實的發生時間會更晚一點，不過相同數字的時間可以認為是在同一時刻被按順序觸發（誤差在幾毫秒之内）

document.readyState 在 DOMContentLoaded 前一刻變為 interactive ，這兩個事件可以認為是同時發生。
document.readyState 在所有資源加載完畢後（包括 iframe 和 img ）變成 complete ，我們可以看到 complete 、 img.onload 和 window.onload 幾乎同時發生，差別就是 window.onload 在所有其他的 load 事件之後執行。

1.2 window.onload

window 對象上的 onload 事件在所有檔案，包括樣式表，圖檔和其他資源下載下傳完畢後觸發。

下面的例子正确檢測了圖檔的大小，因為 window.onload 會等待所有圖檔的加載。

<script>
  window.onload = function() {
    alert('Page loaded');

    // image is loaded at this time
    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
  };
</script>

<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">

1.3 onbeforeunload / onunload

window.onunload

使用者離開頁面的時候，window對象上的 unload 事件會被觸發，我們可以做一些不存在延遲的事情，比如關閉彈出的視窗，可是我們無法阻止使用者轉移到另一個頁面上。

是以我們需要使用另一個事件 — onbeforeunload。

window.onbeforeunload

如果使用者即将離開頁面或者關閉視窗時，beforeunload事件将會被觸發以進行額外的确認。

浏覽器将顯示傳回的字元串，舉個例子：

window.onbeforeunload = function() {
  return "There are unsaved changes. Leave now?";
};

有些浏覽器像 Chrome 和火狐會忽略傳回的字元串取而代之顯示浏覽器自身的文本，這是為了安全考慮，來保證使用者不受到錯誤資訊的誤導。

1.4 示例：

示例代碼：

執行順序

1.alert(“outside.”);

2.alert(“inline.”);

3.alert(getComputedStyle(document.body).width);

4.alert(“defer.”);

5.readyState:interactive；

6.alert(“DOM ready!”);

7.readyState:interactive；

8.alert(“load!”);

9.alert(“beforeunload!”);

10.alert(“unload!”);

*** alert(“async”)在什麼時候執行？

有可能在alert(“defer.”)之前或之後，也有可能在alert(“DOM ready!”)之前或之後。

動态加載 script

動态 script 的預設行為是 async

1.異步，不會阻塞渲染；
2.先加載完成，先運作。

在 DOMContentLoaded 中通路 img 屬性

*** DOMContentLoaded不會等待img加載完成，建議不要在DOMContentLoaded中通路img的相關屬性。

外部樣式是否會阻塞 DOMContentLoaded 的執行？

1. 一般情況，外部樣式不會阻塞 DOMContentLoaded的執行；
2. 如果外部樣式表後有script腳本通路樣式屬性，則會阻塞script腳本的執行(script腳本會等待外部樣式加載完成後執行)，進而會阻塞DOMContentLoaded的執行。

readyState

如果我們在加載文檔之後監聽DOMContentLoaded，它永遠不會執行；在需要的時候，我們可以監聽readystatechange事件，通過document.readyState來獲得文檔的目前狀态。

document.readyState三态：

loading ：文檔正在加載中
interactive ：文檔已經準備完全好
complete ：文檔和所有資源加載完成

*** document.readyState:interactive與DOMContentLoaded相同；document.readyState:complete與window.onload相同。

1.5 總結

頁面事件的生命周期：

DOMContentLoaded 事件在 DOM 樹建構完畢後被觸發，我們可以在這個階段使用js去通路元素。

async 和 defer 的腳本可能還沒有執行。
圖檔及其他資源檔案可能還在下載下傳中。

load 事件在頁面所有資源被加載完畢後觸發，通常我們不會用到這個事件，因為我們不需要等那麼久。
beforeunload 在使用者即将離開頁面時觸發，它傳回一個字元串，浏覽器會向使用者展示并詢問這個字元串以确定是否離開。
unload 在使用者已經離開時觸發，我們在這個階段僅可以做一些沒有延遲的操作，由于種種限制，很少被使用。
document.readyState 表征頁面的加載狀态，可以在 readystatechange 中追蹤頁面的變化狀态：

loading — 頁面正在加載中。
interactive – 頁面解析完畢，時間上和 DOMContentLoaded 同時發生，不過順序在它之前。
complete – 頁面上的資源都已加載完畢，時間上和 window.onload 同時發生，不過順序在他之前。

html 常見的生命周期鈎子

window.addEventListener('resize', function() {
    console.log('擷取或設定目前視窗的resize事件的事件處理函數')
})

window.addEventListener('pageshow', function (e) {
    console.log('當一條會話曆史記錄被執行的時候将會觸發頁面顯示(pageshow)事件。(這包括了後退/前進按鈕操作，同時也會在onload 事件觸發後初始化頁面時觸發)')
    if (e.persisted) 
        console.log('網頁來自緩存.')
})

document.onreadystatechange = function() {
    if (document.readyState == "loading")
        console.log('浏覽器正在加載和處理此文檔')
    if (document.readyState == "interactive")
        console.log('文檔已被解析，但浏覽器還在加載其中的連結資源(圖像和媒體檔案等)')
    if (document.readyState == "complete")
        console.log('文檔已被解析，所有的資源也加載完畢')
}

document.addEventListener('DOMContentLoaded', function() {
    console.log('當初始的 HTML 文檔被完全加載和解析完成之後，DOMContentLoaded 事件被觸發，而無需等待樣式表、圖像和子架構的完全加載。')
})

window.addEventListener('load', function() {
    console.log('當整個頁面及所有依賴資源如樣式表和圖檔都已完成加載時，将觸發load事件。它與DOMContentLoaded不同，後者隻要頁面DOM加載完成就觸發，無需等待依賴資源的加載。')
})

3、HTML 事件參考手冊

：https://www.w3school.com.cn/tags/html_ref_eventattributes.asp

全局事件屬性

HTML 有能力讓事件觸發浏覽器中的動作，例如當使用者單擊元素時啟動 JavaScript。

如需了解有關程式設計事件的更多資訊，請通路 JavaScript 教程。

以下是可添加到 HTML 元素以定義事件操作的全局事件屬性。

Window 事件屬性

針對 window 對象觸發的事件（應用到 <body> 标簽）：

屬性	值	描述
onafterprint	script	文檔列印之後運作的腳本。
onbeforeprint	script	文檔列印之前運作的腳本。
onbeforeunload	script	文檔解除安裝之前運作的腳本。
onerror	script	在錯誤發生時運作的腳本。
onhaschange	script	當文檔已改變時運作的腳本。
onload	script	頁面結束加載之後觸發。
onmessage	script	在消息被觸發時運作的腳本。
onoffline	script	當文檔離線時運作的腳本。
ononline	script	當文檔上線時運作的腳本。
onpagehide	script	當視窗隐藏時運作的腳本。
onpageshow	script	當視窗成為可見時運作的腳本。
onpopstate	script	當視窗曆史記錄改變時運作的腳本。
onredo	script	當文檔執行撤銷（redo）時運作的腳本。
onresize	script	當浏覽器視窗被調整大小時觸發。
onstorage	script	在 Web Storage 區域更新後運作的腳本。
onundo	script	在文檔執行 undo 時運作的腳本。
onunload	script	一旦頁面已下載下傳時觸發（或者浏覽器視窗已被關閉）。

Form 事件

由 HTML 表單内的動作觸發的事件（應用到幾乎所有 HTML 元素，但最常用在 form 元素中）：

屬性	值	描述
onblur	script	元素失去焦點時運作的腳本。
onchange	script	在元素值被改變時運作的腳本。
oncontextmenu	script	當上下文菜單被觸發時運作的腳本。
onfocus	script	當元素獲得焦點時運作的腳本。
onformchange	script	在表單改變時運作的腳本。
onforminput	script	當表單獲得使用者輸入時運作的腳本。
oninput	script	當元素獲得使用者輸入時運作的腳本。
oninvalid	script	當元素無效時運作的腳本。
onreset	script	當表單中的重置按鈕被點選時觸發。HTML5 中不支援。
onselect	script	在元素中文本被選中後觸發。
onsubmit	script	在送出表單時觸發。

Keyboard 事件

屬性	值	描述
onkeydown	script	在使用者按下按鍵時觸發。
onkeypress	script	在使用者敲擊按鈕時觸發。
onkeyup	script	當使用者釋放按鍵時觸發。

Mouse 事件

由滑鼠或類似使用者動作觸發的事件：

屬性	值	描述
onclick	script	元素上發生滑鼠點選時觸發。
ondblclick	script	元素上發生滑鼠輕按兩下時觸發。
ondrag	script	元素被拖動時運作的腳本。
ondragend	script	在拖動操作末端運作的腳本。
ondragenter	script	當元素元素已被拖動到有效拖放區域時運作的腳本。
ondragleave	script	當元素離開有效拖放目标時運作的腳本。
ondragover	script	當元素在有效拖放目标上正在被拖動時運作的腳本。
ondragstart	script	在拖動操作開端運作的腳本。
ondrop	script	當被拖元素正在被拖放時運作的腳本。
onmousedown	script	當元素上按下滑鼠按鈕時觸發。
onmousemove	script	當滑鼠指針移動到元素上時觸發。
onmouseout	script	當滑鼠指針移出元素時觸發。
onmouseover	script	當滑鼠指針移動到元素上時觸發。
onmouseup	script	當在元素上釋放滑鼠按鈕時觸發。
onmousewheel	script	當滑鼠滾輪正在被滾動時運作的腳本。
onscroll	script	當元素滾動條被滾動時運作的腳本。

Media 事件

由媒介（比如視訊、圖像和音頻）觸發的事件（适用于所有 HTML 元素，但常見于媒介元素中，比如 <audio>、<embed>、<img>、<object> 以及 <video>）:

屬性	值	描述
onabort	script	在退出時運作的腳本。
oncanplay	script	當檔案就緒可以開始播放時運作的腳本（緩沖已足夠開始時）。
oncanplaythrough	script	當媒介能夠無需因緩沖而停止即可播放至結尾時運作的腳本。
ondurationchange	script	當媒介長度改變時運作的腳本。
onemptied	script	當發生故障并且檔案突然不可用時運作的腳本（比如連接配接意外斷開時）。
onended	script	當媒介已到達結尾時運作的腳本（可發送類似“感謝觀看”之類的消息）。
onerror	script	當在檔案加載期間發生錯誤時運作的腳本。
onloadeddata	script	當媒介資料已加載時運作的腳本。
onloadedmetadata	script	當中繼資料（比如分辨率和時長）被加載時運作的腳本。
onloadstart	script	在檔案開始加載且未實際加載任何資料前運作的腳本。
onpause	script	當媒介被使用者或程式暫停時運作的腳本。
onplay	script	當媒介已就緒可以開始播放時運作的腳本。
onplaying	script	當媒介已開始播放時運作的腳本。
onprogress	script	當浏覽器正在擷取媒介資料時運作的腳本。
onratechange	script	每當回放速率改變時運作的腳本（比如當使用者切換到慢動作或快進模式）。
onreadystatechange	script	每當就緒狀态改變時運作的腳本（就緒狀态監測媒介資料的狀态）。
onseeked	script	當 seeking 屬性設定為 false（訓示定位已結束）時運作的腳本。
onseeking	script	當 seeking 屬性設定為 true（訓示定位是活動的）時運作的腳本。
onstalled	script	在浏覽器不論何種原因未能取回媒介資料時運作的腳本。
onsuspend	script	在媒介資料完全加載之前不論何種原因終止取回媒介資料時運作的腳本。
ontimeupdate	script	當播放位置改變時（比如當使用者快進到媒介中一個不同的位置時）運作的腳本。
onvolumechange	script	每當音量改變時（包括将音量設定為靜音）時運作的腳本。
onwaiting	script	當媒介已停止播放但打算繼續播放時（比如當媒介暫停已緩沖更多資料）運作腳本

4、HTML DOM 事件

：https://www.w3school.com.cn/jsref/dom_obj_event.asp

HTML DOM 事件

HTML DOM 事件允許 JavaScript 在 HTML 文檔中的元素上注冊不同的事件處理程式。

事件通常與函數結合使用，在事件發生之前函數不會被執行（例如當使用者單擊按鈕時）。

如需有關事件的教程，請學習 JavaScript 事件教程。

事件	描述	屬于
abort	媒體加載中止時發生該事件。	UiEvent Event
afterprint	當頁面開始列印時，或者關閉列印對話框時，發生此事件。	Event
animationend	CSS 動畫完成時發生此事件。	AnimationEvent
animationiteration	重複 CSS 動畫時發生此事件。	AnimationEvent
animationstart	CSS 動畫開始時發生此事件。	AnimationEvent
beforeprint	即将列印頁面時發生此事件。	Event
beforeunload	在文檔即将被解除安裝之前發生此事件。	UiEvent Event
blur	當元素失去焦點時發生此事件。	FocusEvent
canplay	當浏覽器可以開始播放媒體時，發生此事件。	Event
canplaythrough	當浏覽器可以在不停止緩沖的情況下播放媒體時發生此事件。	Event
change	當form元素的内容、選擇的内容或選中的狀态發生改變時，發生此事件	Event
click	當使用者單擊元素時發生此事件。	MouseEvent
contextmenu	當使用者右鍵單擊某個元素以打開上下文菜單時，發生此事件。	MouseEvent
copy	當使用者複制元素的内容時發生此事件。	ClipboardEvent
cut	當使用者剪切元素的内容時發生此事件。	ClipboardEvent
dblclick	當使用者輕按兩下元素時發生此事件。	MouseEvent
drag	拖動元素時發生此事件。	DragEvent
dragend	當使用者完成拖動元素後，發生此事件。	DragEvent
dragenter	當拖動的元素進入放置目标時，發生此事件。	DragEvent
dragleave	當拖動的元素離開放置目标時，發生此事件。	DragEvent
dragover	當拖動的元素位于放置目标之上時，發生此事件。	DragEvent
dragstart	當使用者開始拖動元素時發生此事件。	DragEvent
drop	當将拖動的元素放置在放置目标上時，發生此事件。	DragEvent
durationchange	媒體時長改變時發生此事件。	Event
ended	在媒體播放到盡頭時發生此事件。	Event
error	當加載外部檔案時發生錯誤後，發生此事件。	ProgressEvent UiEvent Event
focus	在元素獲得焦點時發生此事件。	FocusEvent
focusin	在元素即将獲得焦點時發生此事件。	FocusEvent
focusout	在元素即将失去焦點時發生此事件。	FocusEvent
fullscreenchange	當元素以全屏模式顯示時，發生此事件。	Event
fullscreenerror	當元素無法在全屏模式下顯示時，發生此事件。	Event
hashchange	當 URL 的錨部分發生改變時，發生此事件。	HashChangeEvent
input	當元素獲得使用者輸入時，發生此事件。	InputEvent Event
invalid	當元素無效時，發生此事件。	Event
keydown	當使用者正在按下鍵時，發生此事件。	KeyboardEvent
keypress	當使用者按下鍵時，發生此事件。	KeyboardEvent
keyup	當使用者松開鍵時，發生此事件。	KeyboardEvent
load	在對象已加載時，發生此事件。	UiEvent Event
loadeddata	媒體資料加載後，發生此事件。	Event
loadedmetadata	加載中繼資料（比如尺寸和持續時間）時，發生此事件。	Event
loadstart	當浏覽器開始查找指定的媒體時，發生此事件。	ProgressEvent
message	在通過此事件源接收消息時，發生此事件。	Event
mousedown	當使用者在元素上按下滑鼠按鈕時，發生此事件。	MouseEvent
mouseenter	當指針移動到元素上時，發生此事件。	MouseEvent
mouseleave	當指針從元素上移出時，發生此事件。	MouseEvent
mousemove	當指針在元素上方移動時，發生此事件。	MouseEvent
mouseout	當使用者将滑鼠指針移出元素或其中的子元素時，發生此事件。	MouseEvent
mouseover	當指針移動到元素或其中的子元素上時，發生此事件。	MouseEvent
mouseup	當使用者在元素上釋放滑鼠按鈕時，發生此事件。	MouseEvent
mousewheel	不推薦使用。請改用 wheel 事件。	WheelEvent
offline	當浏覽器開始脫機工作時，發生此事件。	Event
online	當浏覽器開始線上工作時，發生此事件。	Event
open	當打開與事件源的連接配接時，發生此事件。	Event
pagehide	當使用者離開某張網頁進行導航時，發生此事件。	PageTransitionEvent
pageshow	在使用者導航到某張網頁時，發生此事件。	PageTransitionEvent
paste	當使用者将一些内容粘貼到元素中時，發生此事件。	ClipboardEvent
pause	當媒體被使用者暫停或以程式設計方式暫停時，發生此事件。	Event
play	當媒體已啟動或不再暫停時，發生此事件。	Event
playing	在媒體被暫停或停止以緩沖後播放時，發生此事件。	Event
popstate	視窗的曆史記錄改變時，發生此事件。	PopStateEvent
progress	當浏覽器正處于獲得媒體資料的過程中時，發生此事件。	Event
ratechange	媒體播放速度改變時發生此事件。	Event
reset	重置表單時發生此事件。	Event
resize	調整文檔視圖的大小時發生此事件。	UiEvent Event
scroll	滾動元素的滾動條時發生此事件。	UiEvent Event
search	當使用者在搜尋字段中輸入内容時，發生此事件。	Event
seeked	當使用者完成移動/跳到媒體中的新位置時，發生該事件。	Event
seeking	當使用者開始移動/跳到媒體中的新位置時，發生該事件。	Event
select	使用者選擇文本後（對于<input>和<textarea>）發生此事件	UiEvent Event
show	當 <menu> 元素顯示為上下文菜單時，發生此事件。	Event
stalled	當浏覽器嘗試擷取媒體資料但資料不可用時，發生此事件。	Event
storage	Web 存儲區域更新時發生此事件。	StorageEvent
submit	在送出表單時發生此事件。	Event
suspend	當浏覽器有意不擷取媒體資料時，發生此事件。	Event
timeupdate	當播放位置更改時發生此事件。	Event
toggle	當使用者打開或關閉 <details> 元素時，發生此事件。	Event
touchcancel	在觸摸被中斷時，發生此事件。	TouchEvent
touchend	當手指從觸摸屏上移開時，發生此事件。	TouchEvent
touchmove	當手指在螢幕上拖動時，發生此事件。	TouchEvent
touchstart	當手指放在觸摸屏上時，發生此事件。	TouchEvent
transitionend	CSS 轉換完成時，發生此事件。	TransitionEvent
unload	頁面解除安裝後（對于 <body>），發生此事件。	UiEvent Event
volumechange	當媒體的音量已更改時，發生此事件。	Event
waiting	當媒體已暫停但預期會恢複時，發生此事件。	Event
wheel	當滑鼠滾輪在元素向上或向下滾動時，發生此事件。	WheelEvent

HTML DOM 事件屬性和方法

屬性/方法	描述	屬于
altKey	傳回觸發滑鼠事件時是否按下了 "ALT" 鍵。	MouseEvent
altKey	傳回觸發按鍵事件時是否按下了 "ALT" 鍵。	KeyboardEvent TouchEvent
animationName	傳回動畫的名稱。	AnimationEvent
bubbles	傳回特定事件是否為冒泡事件。	Event
button	傳回觸發滑鼠事件時按下的滑鼠按鈕。	MouseEvent
buttons	傳回觸發滑鼠事件時按下的滑鼠按鈕。	MouseEvent
cancelBubble	設定或傳回事件是否應該向上層級進行傳播。
cancelable	傳回事件是否可以阻止其預設操作。	Event
changeTouches	傳回在上一觸摸與該觸摸之間其狀态已更改的所有觸摸對象的清單	TouchEvent
charCode	傳回觸發 onkeypress 事件的鍵的 Unicode 字元代碼。	KeyboardEvent
clientX	傳回觸發滑鼠事件時，滑鼠指針相對于目前視窗的水準坐标。	MouseEvent TouchEvent
clientY	傳回觸發滑鼠事件時，滑鼠指針相對于目前視窗的垂直坐标。	MouseEvent TouchEvent
clipboardData	傳回對象，其中包含受剪貼闆操作影響的資料。	ClipboardData
code	傳回觸發事件的鍵的代碼。	KeyboardEvent
composed	訓示該事件是否可以從 Shadow DOM 傳遞到一般的 DOM。	Event
composedPath()	傳回事件的路徑。
createEvent()	建立新事件。	Event
ctrlKey	傳回觸發滑鼠事件時是否按下了 "CTRL" 鍵。	MouseEvent
ctrlKey	傳回按鍵滑鼠事件時是否按下了 "CTRL" 鍵。	KeyboardEvent TouchEvent
currentTarget	傳回其事件偵聽器觸發事件的元素。	Event
data	傳回插入的字元。	InputEvent
dataTransfer	傳回一個對象，其中包含被拖放或插入/删除的資料。	DragEvent InputEvent
defaultPrevented	傳回是否為事件調用 preventDefault() 方法。	Event
deltaX	傳回滑鼠滾輪的水準滾動量（x 軸）。	WheelEvent
deltaY	傳回滑鼠滾輪的垂直滾動量（y 軸）。	WheelEvent
deltaZ	傳回滑鼠滾輪的 Z 軸滾動量。	WheelEvent
deltaMode	傳回數字，代表增量值（像素、線或頁面）的度量機關。	WheelEvent
detail	傳回數字，訓示滑鼠被單擊了多少次。	UiEvent
elapsedTime	傳回動畫已運作的秒數。	AnimationEvent
elapsedTime	傳回過渡已運作的秒數。
eventPhase	傳回目前正在評估事件流處于哪個階段。	Event
getModifierState()	傳回包含目标範圍的數組，此範圍将受到插入/删除的影響。	MouseEvent
getTargetRanges()	傳回包含目标範圍的數組，此範圍将受到插入/删除的影響。	InputEvent
inputType	傳回更改的類型（即 "inserting" 或 "deleting"）。	InputEvent
isComposing	傳回事件的狀态是否正在構成。	InputEvent KeyboardEvent
isTrusted	傳回事件是否受信任。	Event
key	傳回事件表示的鍵的鍵值。	KeyboardEvent
key	傳回更改後的存儲項的鍵。	StorageEvent
keyCode	傳回觸發 onkeypress、onkeydown 或 onkeyup 事件的鍵的 Unicode 字元代碼。	KeyboardEvent
location	傳回鍵盤或裝置上按鍵的位置。	KeyboardEvent
lengthComputable	傳回進度的長度是否可計算。	ProgressEvent
loaded	傳回已加載的工作量。	ProgressEvent
metaKey	傳回事件觸發時是否按下了 "META" 鍵。	MouseEvent
metaKey	傳回按鍵事件觸發時是否按下了 "META" 鍵。	KeyboardEvent TouchEvent
MovementX	傳回相對于上一 mousemove 事件的位置的滑鼠指針的水準坐标	MouseEvent
MovementY	傳回相對于上一 mousemove 事件的位置的滑鼠指針的垂直坐标	MouseEvent
newURL	傳回更改 hash 後的文檔 URL。	HasChangeEvent
newValue	傳回更改後的存儲項目的新值。	StorageEvent
offsetX	傳回滑鼠指針相對于目标元素邊緣位置的水準坐标。	MouseEvent
offsetY	傳回滑鼠指針相對于目标元素邊緣位置的垂直坐标。	MouseEvent
oldURL	傳回更改 hash 前的文檔 URL。	HasChangeEvent
oldValue	傳回更改後的存儲項目的舊值。	StorageEvent
onemptied	當發生不良情況且媒體檔案突然不可用時，發生此事件。
pageX	傳回觸發滑鼠事件時滑鼠指針相對于文檔的水準坐标。	MouseEvent
pageY	傳回觸發滑鼠事件時滑鼠指針相對于文檔的垂直坐标。	MouseEvent
persisted	傳回網頁是否被浏覽器緩存。	PageTransitionEvent
preventDefault()	如果可以取消事件，則将其取消，不執行屬于該事件的預設操作。	Event
propertyName	傳回與動畫或過渡相關聯的 CSS 屬性的名稱。	AnimationEvent TransitionEvent
pseudoElement	傳回動畫或過渡的僞元素的名稱。	AnimationEvent TransitionEvent
region	MouseEvent
relatedTarget	傳回與觸發滑鼠事件的元素相關的元素。	MouseEvent
relatedTarget	傳回與觸發事件的元素相關的元素。	FocusEvent
repeat	傳回是否重複按住某個鍵。	KeyboardEvent
screenX	傳回視窗/滑鼠指針相對于螢幕的水準坐标。	MouseEvent
screenY	傳回視窗/滑鼠指針相對于螢幕的垂直坐标。	MouseEvent
shiftKey	傳回事件觸發時是否按下了 "SHIFT" 鍵。	MouseEvent
shiftKey	傳回按鍵事件觸發時是否按下了 "SHIFT" 鍵。	KeyboardEvent TouchEvent
state	傳回包含曆史記錄條目副本的對象。	PopStateEvent
stopImme...()	防止同一事件的其他偵聽器被調用。	Event
stopPropagation()	防止事件在事件流中進一步傳播。	Event
storageArea	傳回代表受影響的存儲對象的對象。	StorageEvent
target	傳回觸發事件的元素。	Event
targetTouches	傳回包含仍與觸摸面接觸的所有觸摸點的Touch對象的TouchList清單	TouchEvent
timeStamp	傳回建立事件的時間（相對于紀元的毫秒數）。	Event
total	傳回将要加載的工作總量。	ProgressEvent
touches	傳回目前與表面接觸的所有 touch 對象的清單。	TouchEvent
type	傳回事件名稱。	Event
url	傳回已更改項目的所在文檔的 URL。	StorageEvent
which	傳回觸發滑鼠事件時按下的滑鼠按鈕。	MouseEvent
which	傳回觸發 onkeypress 事件的鍵的 Unicode 字元碼，或觸發 onkeydown 或 onkeyup 事件的鍵的 Unicode 鍵碼	KeyboardEvent
view	傳回對發生事件的 Window 對象的引用。