最新的Web開發教程
 

HTML DOM事件


HTML DOM事件

HTML DOM事件允許JavaScript的HTML文檔中的元素註冊不同的事件處理程序。

事件組合通常用於與功能,並在事件發生前的功能不會被執行(such as when a user clicks a button)

Tip:事件模型是由W3C DOM級別2規範。


HTML DOM事件

DOM:表示在引入DOM級別的屬性。

鼠標事件

事件 描述 DOM
的onclick 當用戶點擊一個元件上發生的事件 2
oncontextmenu 發生事件,當元件在用戶右鍵點擊,以打開上下文菜單 3
onfocus此 該事件發生時,用戶雙擊當一個元件上 2
onmousedown事件 當用戶在一個元素按下鼠標按鈕時發生的事件 2
OnMouseEnter在 當指針移動到一個元件發生事件 2
OnMouseLeave在 當指針移出元素的發生的事件 2
的OnMouseMove 事件當指針移動,而它是在一個元素上發生 2
的onmouseover 當指針移動到一個元素,或在它的一個子發生的事件 2
的onmouseout 當用戶移動鼠標指針出的元件的,或將其子之一發生的情況下 2
onmouseup 當用戶在一個元件釋放鼠標按鈕時發生的事件 2

鍵盤事件

事件 描述 DOM
onkeydown事件 當用戶按壓一鍵時發生的事件 2
onkeypress事件 當用戶按下某個鍵時發生的事件 2
的onkeyup 當用戶釋放一個鍵時發生的事件 2

幀/對象活動

事件 描述 DOM
onabort 當資源的加載已中止發生的事件 2
onbeforeunload 面前的這份文件即將被卸載時發生的事件 2
的onerror 當在加載外部文件時出錯,發生事件 2
onhashchange 當出現了改變URL的錨部分發生的事件 3
負載 當對象已加載發生的事件 2
onpageshow 當用戶瀏覽一個網頁時發生的事件 3
onpagehide 當用戶從一個網頁導航離開此事件發生 3
在onResize 當文檔視圖被調整大小時發生事件 2
onscroll 當一個元素的滾動條被滾動時發生的事件 2
onunload的 一旦頁面被卸載時發生的事件(對於<BODY>) 2

形式活動

事件 描述 DOM
的onblur 當元件失去焦點時發生事件 2
平變化 當窗體元件,選擇,或所檢查的狀態的內容發生了變化時發生的事件(for <input>, <keygen>, <select>, and <textarea>) 2
聚焦狀態 當元件獲得焦點發生事件 2
onfocusin 當一個元素即將獲得焦點時發生的事件 2
onfocusout在 當一個元素即將失去焦點時發生的事件 2
oninput 當元件獲取的用戶輸入時發生的事件 3
oninvalid 當元件是無效時發生事件 3
onreset 當一個形式是復位發生時,事件 2
onsearch 當用戶在搜索字段中寫入的東西發生事件(<=輸入“搜索”>) 3
ONSELECT 用戶選擇某些文本後發生的事件(for <input> and <textarea>) 2
的onsubmit 當表單提交時發生的事件 2

拖動事件

事件 描述 DOM
ondrag當 當被拖動的元素發生事件 3
ondragend 當用戶已經完成拖動元件發生事件 3
ondragenter 當拖動的元素進入放置目標發生事件 3
ondragleave 當拖動的元素離開放置目標發生事件 3
ondragover 當拖動的元素是在放置目標發生事件 3
ondragstart 當用戶開始拖動一個元件發生事件 3
ondrop 當拖動的元素上放置目標下降發生的事件 3

剪貼板活動

事件 描述 DOM
oncopy 該事件發生時的元件的用戶副本時,該內容
oncut 當用戶切斷的元素的含量發生事件
onpaste 當用戶粘貼中的一個元素的某些內容發生事件

打印事件

事件 描述 DOM
onafterprint 該事件當一個頁面已經開始打印,或如果打印對話框已關閉時 3
onbeforeprint 當網頁是關於要被打印時發生的事件 3

媒體活動

事件 描述 DOM
onabort 當媒體的加載被中止發生事件 3
oncanplay 此事件發生時(當它緩衝到足以開始),瀏覽器就可以開始播放媒體 3
oncanplaythrough 此事件發生時,瀏覽器可以通過媒體不必停止緩衝玩 3
ondurationchange 在媒體的持續時間更改時發生的事件 3
onemptied 當壞事發生,並把媒體文件突然發生不可用的事件(like unexpectedly disconnects) 3
onended 當媒體有到達終點時發生的事件(useful for messages like "thanks for listening") 3
的onerror 發生該事件時,媒體文件的加載過程中出現錯誤 3
onloadeddata 當媒體數據被加載發生的事件 3
onloadedmetadata 當元數據發生事件(like dimensions and duration)是加載 3
onloadstart 當瀏覽器開始尋找指定的媒體發生的事件 3
在onPause 當媒體被暫停由用戶或程序發生事件 3
onplay 當媒體已經開始發生事件或不再暫停 3
onplaying 當媒體已經暫停或停止緩衝播放後發生的事件 3
onprogress 當瀏覽器是在得到媒體數據的過程中發生的事件(downloading the media) 3
onratechange 當媒體的播放速度更改時發生的事件 3
onseeked 當用戶完成移動/跳過在媒體中的新位置發生事件 3
onseeking 當用戶開始移動/跳過在媒體中的新位置發生事件 3
onstalled 當瀏覽器試圖讓媒體數據時發生的事件,但數據不可用 3
onsuspend 當瀏覽器是故意沒有得到媒體數據時發生的事件 3
ontimeupdate 當播放位置已經改變時發生的事件(如,當用戶快進到不同的點在媒體) 3
onvolumechange 當媒體的體積已經改變(包括設置音量為“靜音”)發生的情況下 3
onwaiting 當媒體已經暫停發生的事件,但有望恢復(當媒體暫停緩衝更多的數據等) 3

動畫事件

事件 描述 DOM
animationend 當CSS動畫完成時發生的事件 3
animationiteration 當重複CSS動畫此事件發生 3
animationstart 當CSS動畫已經開始發生事件 3

轉換事件

事件 描述 DOM
transitionend 當CSS過渡已經完成發生的事件 3

服務器發送事件

事件 描述 DOM
的onerror 當與事件源中發生錯誤時發生的事件
的onMessage 當通過事件源接收到的消息發生的情況下
的OnOpen 與事件源的連接被打開時產生的事件

其它活動

事件 描述 DOM
的onMessage 當通過或從物體接收到的消息發生的情況下(WebSocket, Web Worker, Event Source or a child frame or a parent window) 3
onmousewheel 已過時。 使用onwheel事件,而不是
ononline 當瀏覽器啟動聯機工作時發生的事件 3
onoffline 當瀏覽器開始脫機工作時發生的事件 3
onpopstate 當窗口的歷史變化發生的事件 3
展出 當發生事件<menu>元件被示出為上下文菜單 3
onstorage 當Web存儲區域被更新時發生的事件 3
ontoggle 當用戶打開或關閉時發生事件<details>元件 3
onwheel 當鼠標滾輪或在元件捲起向下發生事件 3

觸摸事件

事件 描述 DOM
ontouchcancel 當觸摸被中斷時發生的事件
ontouchend 當手指從觸摸屏移除時發生的事件
ontouchmove 當手指在屏幕上拖動此事件發生
ontouchstart 當手指被放置在觸摸屏上發生的事件

事件對象

常量

不變 描述 DOM
CAPTURING_PHASE 當前的事件階段是捕獲階段(1) 1
AT_TARGET 當前事件是在目標相位,即,它是在目標事件被評估(2) 2
BUBBLING_PHASE 當前的事件階段是冒泡階段(3) 3

屬性

屬性 描述 DOM
泡泡 返回特定事件是否為冒泡事件 2
取消 返回是否不是一個事件都可以有其默認動作。 2
currentTarget當前 返回其事件監聽器觸發事件的元素 2
defaultPrevented 在返回是否preventDefault()方法被調用的事件 3
的EventPhase 該事件流的相位目前正在評估返回 2
isTrusted 返回一個事件是否是可信的 3
目標 返回觸發事件的元素 2
的timeStamp 返回時間(in milliseconds relative to the epoch)在其上創建該事件 2
類型 返回事件的名稱 2
視圖 返回到窗口對象,其中發生了此事件的參考 2

方法

方法 描述 DOM
preventDefault() 取消的事件,如果是取消,這意味著不會發生屬於該事件的默認操作 2
stopImmediatePropagation() 防止同一事件的其他監聽器被調用 3
stopPropagation() 防止事件流中的事件的進一步傳播 2

MouseEvent對象

屬性 描述 DOM
ALT鍵 返回是否"ALT"當鼠標事件被觸發鍵被按下 2
按鍵 當鼠標事件被觸發按下返回哪個鼠標按鈕 2
鈕扣 當鼠標事件被觸發被壓返回哪個鼠標按鍵 3
clientX 返回當鼠標事件被觸發的鼠標指針,相對於當前窗口中,水平坐標 2
clientY 返回鼠標指針,相對於當前窗口,垂直坐標,當鼠標事件被觸發 2
中ctrlKey 返回是否"CTRL"當被觸發時,鼠標事件中被按下鍵 2
詳情 返回一個數字,表示鼠標被點擊了多少次 2
metaKey 返回是否"META" ,當事件被觸發鍵被按下 2
pageX屬性 返回當鼠標事件被觸發的鼠標指針,相對於所述文檔的水平坐標
pageY 返回鼠標指針,相對於文檔的縱坐標,當鼠標事件被觸發
relatedTarget 返回與觸發鼠標事件元素的元素 2
screenX 返回當事件被觸發的鼠標指針,相對於屏幕的水平坐標 2
screenY 返回鼠標指針,相對於屏幕的垂直坐標時事件被觸發 2
Shift鍵, 返回是否"SHIFT"當事件被觸發鍵被按下 2
哪一個 當鼠標事件被觸發按下返回哪個鼠標按鈕 2

KeyboardEvent對象

屬性 描述 DOM
ALT鍵 返回是否"ALT"時的關鍵事件被觸發鍵被按下 2
中ctrlKey 返回是否"CTRL"時的關鍵事件被觸發鍵被按下 2
則charCode 返回觸發onkeypress事件事件的鍵的Unicode字符碼 2
返回由事件所代表的密鑰的密鑰值 3
關鍵代碼 返回觸發onkeypress事件事件的關鍵,或觸發的onkeydown或onkeyup事件的關鍵的Unicode按鍵代碼的Unicode字符碼 2
位置 返回鍵盤或設備上的按鍵的位置 3
metaKey 返回是否"meta"時被觸發的關鍵事件按鍵 2
Shift鍵, 返回是否"SHIFT"時的關鍵事件被觸發鍵被按下 2
哪一個 返回觸發onkeypress事件事件的關鍵,或觸發的onkeydown或onkeyup事件的關鍵的Unicode按鍵代碼的Unicode字符碼 2

HashChangeEvent對象

屬性 描述 DOM
的newURL 返回文檔的URL,哈希已被更改後,
OLDURL 返回文檔的URL,哈希被改變之前,

PageTransitionEvent對象

屬性 描述 DOM
堅持 是否返回的網頁被瀏覽器緩存

FocusEvent對象

屬性 描述 DOM
relatedTarget 返回相關的觸發事件的元素的元素 3

AnimationEvent對象

屬性 描述 DOM
animationName 返回動畫名稱
elapsedTime 返回的秒數動畫已經運行

TransitionEvent對象

屬性 描述 DOM
propertyName的 返回CSS屬性與轉型相關的名稱
elapsedTime 返回的秒數的過渡已經運行

WheelEvent對象

屬性 描述 DOM
DELTAX 返回一個鼠標滾輪的水平滾動量(x-axis) 3
移動deltaY 返回一個鼠標滾輪的垂直滾動量(y-axis) 3
deltaZ 返回一個鼠標滾輪的滾動量為z軸 3
deltaMode 返回一個數字,表示用於增量值測量單元(pixels, lines or pages) 3