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 |