HTML DOM 事件對象

事件是可以被 javascript 偵測到的行為

javascript 使我們有能力建立動态頁面。事件是可以被 javascript 偵測到的行為

html dom 事件允許javascript在html文檔元素中注冊不同僚件處理程式;事件通常與函數結合使用，函數不會在事件發生前被執行！(如使用者點選按鈕)

屬性

描述

onclick

滑鼠單擊時調用的事件句柄

oncontextmenu

點選滑鼠右鍵打開上下文菜單時觸發

ondblclick

滑鼠輕按兩下時調用的事件句柄

onmousedown

滑鼠按鈕被按下

onmouseenter

當滑鼠指針移動到元素上時觸發

onmouseleave

當滑鼠指針移出元素時觸發

onmousemove

滑鼠被移動

onmouseover

滑鼠移到某元素之上

onmouseout

滑鼠從某元素移開

onmouseup

滑鼠按鍵被松開

所有浏覽器都支援 oncontextmenu 事件，contextmenu 元素隻有 firefox 浏覽器支援

文法：

注意： internet explorer 8 及更早 ie 浏覽器版本不支援 addeventlistener()

onkeydown

某個鍵盤按鍵被按下

onkeypress

某個鍵盤按鍵被按下并松開

onkeyup

某個鍵盤按鍵被松開

onabort

圖像的加載被中斷時觸發

onbeforeunload

該事件在即将離開頁面（重新整理或關閉）時觸發

onerror

加載文檔或圖像中發生錯誤時觸發

onhashchange

目前 url 的錨部分發生修改時觸發

onload

一張頁面或一幅圖像完成加載

onpageshow

使用者通路頁面時觸發

onpagehide

使用者離開目前網頁跳轉到另外一個頁面時觸發

onresize

視窗或架構被重新調整大小時觸發

onscroll

當文檔被滾動時觸發

onunload

使用者退出頁面時觸發

onbeforeunload事件在即将離開目前頁面（重新整理或關閉）時觸發，該事件可用于彈出對話框提示使用者是繼續浏覽頁面還是離開目前頁面

對話框預設的提示資訊根據不同的浏覽器有所不同，标準的資訊類似 "确定要離開此頁嗎？"。該資訊不能删除。但你可以自定義一些消息提示與标準資訊一起顯示在對話框

注意： 在 firefox 浏覽器中，隻顯示預設提醒資訊（不顯示自定義資訊）

onhashchange事件在目前url的錨部分(以'#'号為開始) 發生改變時觸發。

可以使用以下方式調用事件:

通過設定location對象的location.hash或location.href屬性修改錨部分

使用不同書簽導航到目前頁面（使用"後退"或"前進"按鈕）

點選連結跳轉到書簽錨

onpageshow事件在使用者浏覽網頁時觸發

onpageshow事件類似于onload事件，onload事件在頁面第一次加載時觸發，onpageshow事件在每次加載頁面時觸發，而onload事件在頁面從浏覽器緩存中讀取時不觸發

為了檢視頁面是直接從伺服器上載入還是從緩存中讀取，你可以使用 pagetransitionevent 對象的 persisted 屬性來判斷。如果頁面從浏覽器的緩存中讀取該屬性傳回 ture，否則傳回 false

onpagehide事件在使用者離開網頁時觸發

離開網頁有多種方式。如點選一個連結，重新整理頁面，送出表單，關閉浏覽器等。onpagehide 事件有時可以替代onunload事件，但onunload事件觸發後無法緩存頁面。

同樣可以使用 pagetransitionevent 對象的 persisted 屬性來判斷頁面是否從浏覽器的緩存中讀取的該屬性

onblur

元素失去焦點時觸發

onchange

表單元素的内容改變時觸發(<code>&lt;input&gt;&lt;keygen&gt;&lt;select&gt;&lt;textarea</code>&gt;)

onfocus

元素擷取焦點時觸發

onfocusin

元素即将擷取焦點時觸發

onfocusout

元素即将失去焦點時觸發

oninput

元素擷取使用者輸入時觸發

onreset

表單重置時觸發

onsearch

使用者向搜尋域輸入文本時觸發 (<code>&lt;input="search"&gt;</code>)

onselect

使用者選取文本時觸發 ( <code>&lt;input&gt; 和 &lt;textarea&gt;</code>)

onsubmit

表單送出時觸發

onfocusin 事件在一個元素即将獲得焦點時觸發，onfocusout 事件在元素即将失去焦點時觸發

提示： onfocusin/onfocusout 事件類似于onfocus/onblur事件。 主要的差別是 onfocus/onblur 事件不支援冒泡。是以，如果你想知道元素或者其子元素是否擷取焦點，需要使用onfocusin/onfocusout事件。

雖然 firefox 浏覽器不支援 onfocusin/onfocusout 事件，但你可以通過使用 onfocus（使用addeventlistener()方法的可選參數usecapture）的捕獲監聽事件來檢視元素或其子元素是否擷取焦點。

oninput事件在使用者輸入時觸發。該事件類似于onchange 事件。不同之處在于 oninput 事件在元素值發生變化是立即觸發，onchange在元素失去焦點時觸發。另外一點不同是onchange事件也可以作用于<code>&lt;keygen&gt;</code>和<code>&lt;select&gt;</code>元素

oncopy

使用者拷貝元素内容時觸發

oncut

使用者剪切元素内容時觸發

onpaste

使用者粘貼元素内容時觸發

onafterprint

頁面已經開始列印，或者列印視窗已經關閉時觸發

onbeforeprint

頁面即将開始列印時觸發

ondrag

元素正在拖動時觸發

ondragend

使用者完成元素的拖動時觸發

ondragenter

拖動的元素進入放置目标時觸發

ondragleave

拖動元素離開放置目标時觸發

ondragover

拖動元素在放置目标上時觸發

ondragstart

使用者開始拖動元素時觸發

ondrop

拖動元素放置在目标區域時觸發

視訊/音頻（audio/video）終止加載時觸發

oncanplay

使用者可以開始播放視訊/音頻（audio/video）時觸發

oncanplaythrough

視訊/音頻（audio/video）可以正常播放且無需停頓和緩沖時觸發

ondurationchange

視訊/音頻（audio/video）的時長發生變化時觸發

onemptied

播放清單為空時觸發

onended

視訊/音頻（audio/video）播放結束時觸發

視訊/音頻（audio/video）資料加載期間發生錯誤時觸發

onloadeddata

浏覽器加載視訊/音頻（audio/video）目前幀時觸發觸發

onloadedmetadata

指定視訊/音頻（audio/video）的中繼資料加載後觸發

onloadstart

浏覽器開始尋找指定視訊/音頻（audio/video）觸發

onpause

視訊/音頻（audio/video）暫停時觸發

onplay

視訊/音頻（audio/video）開始播放時觸發

onplaying

視訊/音頻(audio/video)暫停或者在緩沖後準備重新開始播放時觸發

onprogress

浏覽器下載下傳指定的視訊/音頻（audio/video）時觸發

onratechange

視訊/音頻（audio/video）的播放速度發送改變時觸發

onseeked

使用者重新定位視訊/音頻（audio/video）的播放位置後觸發

onseeking

使用者開始重新定位視訊/音頻（audio/video）時觸發

onstalled

浏覽器擷取媒體資料，但媒體資料不可用時觸發

onsuspend

浏覽器讀取媒體資料中止時觸發

ontimeupdate

目前的播放位置發送改變時觸發

onvolumechange

音量發生改變時觸發

onwaiting

視訊由于要播放下一幀而需要緩沖時觸發

animationend

css 動畫結束播放時觸發

animationiteration

css 動畫重複播放時觸發

animationstart

css 動畫開始播放時觸發

transitionend

css 完成過渡後觸發

onmessage

對象(websocket/web worker/event source/子frame/父視窗)接收到消息時觸發

onmousewheel

已廢棄。 使用onwheel 事件替代

ononline

浏覽器開始線上工作時觸發

onoffline

浏覽器開始離線工作時觸發

onpopstate

視窗的浏覽曆史（history 對象）發生改變時觸發

onshow

元素在上下文菜單顯示時觸發

onstorage

web storage(html 5 web 存儲)更新時觸發

ontoggle

使用者打開或關閉 元素時觸發

onwheel

滑鼠滾輪在元素上下滾動時觸發

靜态變量

capturing-phase

目前事件階段為捕獲階段(3)

at-target

目前事件是目标階段,在評估目标事件(1)

bubbling-phase

目前的事件為冒泡階段 (2)

bubbles

傳回布爾值，訓示事件是否是起泡事件類型

cancelable

傳回布爾值，訓示事件是否可擁可取消的預設動作

currenttarget

傳回其事件監聽器觸發該事件的元素

eventphase

傳回事件傳播的目前階段

target

傳回觸發此事件的元素（事件的目标節點）

timestamp

傳回事件生成的日期和時間

type

傳回目前 event 對象表示的事件的名稱

bubbles事件屬性傳回一個布爾值，如果事件是起泡類型，則傳回 true，否則傳回 fasle

事件冒泡分為三個階段，它是這樣的:

第一，捕獲階段。事件從 document 對象沿着文檔樹向下傳遞給目标節點。如果目标的任何一個先輩專門注冊了捕獲事件句柄，那麼在事件傳播過程中運作這些句柄

第二個階段發生在目标節點自身。直接注冊砸目标上的适合的事件句柄将運作。這與 0 級事件模型提供的事件處理方法相似

第三，起泡階段。在此階段，事件将從目标元素向上傳播回或起泡回 document 對象的文檔層次。

方法

initevent()

初始化新建立的 event 對象的屬性

preventdefault()

通知浏覽器不要執行與事件關聯的預設動作

stoppropagation()

不再派發事件

addeventlistener()

允許在目标事件中注冊監聽事件(ie8= attachevent())

dispatchevent()

允許發送事件到監聽器上 (ie8 =fireevent())

removeeventlistener()

運作一次注冊在事件目标上的監聽事件(ie8 =detachevent())

handleevent()

把任意對象注冊為事件處理程式

createevent()

altkey

傳回當事件被觸發時，"alt" 是否被按下

button

傳回當事件被觸發時，哪個滑鼠按鈕被點選

clientx

傳回當事件被觸發時，滑鼠指針的水準坐标

clienty

傳回當事件被觸發時，滑鼠指針的垂直坐标

ctrlkey

傳回當事件被觸發時，"ctrl" 鍵是否被按下

location

傳回按鍵在裝置上的位置

charcode

傳回onkeypress事件觸發鍵值的字母代碼

key

在按下按鍵時傳回按鍵的辨別符

keycode

傳回onkeypress事件觸發的鍵值的字元代碼，或者 onkeydown 或 onkeyup 事件的鍵的代碼

which

metakey

傳回當事件被觸發時，"meta" 鍵是否被按下

relatedtarget

傳回與事件的目标節點相關的節點

screenx

傳回當某個事件被觸發時，滑鼠指針的水準坐标

screeny

傳回當某個事件被觸發時，滑鼠指針的垂直坐标

shiftkey

傳回當事件被觸發時，"shift" 鍵是否被按下

button 事件屬性可傳回一個整數，訓示當事件被觸發時哪個滑鼠按鍵被點選

文法

注意： internet explorer 8 及更早ie版本:

1:指定滑鼠左鍵;4:指定滑鼠中鍵;2:指定滑鼠右鍵

location 屬性傳回按鍵在鍵盤或設定上的位置。數字可由 4 個常數表示：

dom_key_location_standard:表示不是最左邊或者最右邊的按鍵，也不是數字鍵盤上的數字（該值幾乎包含了所有的按鍵，如 "a", "u", "space" 或 "5")

dom_key_location_left:左側按鍵 (如果左側的 "ctrl" 鍵或左側的"alt" 鍵)

dom_key_location_right:右側按鍵 (如果右側的 "ctrl" 鍵或左側的"alt" 鍵)

dom_key_location_numpad:數字按鍵（在标準鍵盤的右側）

注意： location 屬性可用于onkeydown 和 onkeyup 事件，但不能用于onkeypress事件。該屬性是隻讀的

charcode 屬性傳回onkeypress事件觸發鍵值的字母代碼。unicode 字元代碼是一個字母的數字 (如數字 "97" 代表字母 "a")。

提示： 如果你需要将 unicode 值轉換為字元，可以使用 fromcharcode() 方法。

注意： 如果該屬性用于onkeydown 或 onkeyup 事件，傳回值總為 "0"。該屬性是隻讀的。

注意：ie8 及其更早版本不支援 which 屬性。不支援的浏覽器可使用 keycode 屬性。但是， keycode 屬性在 firefox 浏覽器的 onkeypress 事件中是無效的。 相容這些浏覽器你可以使用以下代碼：

兩種代碼類型的差別是:

字元代碼 - 表示 ascii 字元的數字

鍵盤代碼 - 表示鍵盤上真實鍵的數字

兩種類型的值不是都相等的，例如小寫字元"w" 和大寫字元 "w" 有相同的鍵盤代碼，因為他們他們鍵盤上 ( "w" 代碼為 "87")，但是它們有不同的字元代碼，兩個字元輸出是不一樣的( "w" 和 "w" 字元代碼為"119" 和 "87")

ie8 及其更早版本不支援 which 屬性。不支援的浏覽器可使用keycode 屬性。但是， keycode 屬性在 firefox 浏覽器的 onkeypress 事件中是無效的。相容這些浏覽器你可以使用以下代碼：

initmouseevent()

初始化滑鼠事件對象的值

initkeyboardevent()

初始化鍵盤事件對象的值