天天看點

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 的解析 )
HTML 頁面的生命周期、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 頁面的生命周期、HTML 事件

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 示例:

示例代碼:

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

 執行順序

    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.先加載完成,先運作。
HTML 頁面的生命周期、HTML 事件

在 DOMContentLoaded 中通路 img 屬性

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

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

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

HTML 頁面的生命周期、HTML 事件
  • 1. 一般情況,外部樣式不會阻塞 DOMContentLoaded的執行;
  • 2. 如果外部樣式表後有script腳本通路樣式屬性,則會阻塞script腳本的執行(script腳本會等待外部樣式加載完成後執行),進而會阻塞DOMContentLoaded的執行。

readyState

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

document.readyState三态:

  • loading : 文檔正在加載中
  • interactive : 文檔已經準備完全好
  • complete : 文檔和所有資源加載完成
HTML 頁面的生命周期、HTML 事件

 *** 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 對象的引用。