Latest web development tutorials

HTML DOM 事件對象

HTML DOM 事件

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

事件通常與函數結合使用,函數不會在事件發生前被執行! (如用戶點擊按鈕)。

提示:在W3C 2級DOM事件中規範了事件模型。


HTML DOM 事件

DOM:指明使用的DOM屬性級別。

鼠標事件

屬性 描述 DOM
onclick 當用戶點擊某個對象時調用的事件句柄。 2
oncontextmenu 在用戶點擊鼠標右鍵打開上下文菜單時觸發
ondblclick 當用戶雙擊某個對象時調用的事件句柄。 2
onmousedown 鼠標按鈕被按下。 2
onmouseenter 當鼠標指針移動到元素上時觸發。 2
onmouseleave 當鼠標指針移出元素時觸發 2
onmousemove 鼠標被移動。 2
onmouseover 鼠標移到某元素之上。 2
onmouseout 鼠標從某元素移開。 2
onmouseup 鼠標按鍵被鬆開。 2

鍵盤事件

属性 描述 DOM
onkeydown 某个键盘按键被按下。 2
onkeypress 某个键盘按键被按下并松开。 2
onkeyup 某个键盘按键被松开。 2

框架/對象(Frame/Object)事件

属性 描述 DOM
onabort 图像的加载被中断。 ( <object>) 2
onbeforeunload 该事件在即将离开页面(刷新或关闭)时触发 2
onerror 在加载文档或图像时发生错误。 ( <object>, <body>和 <frameset>)
onhashchange 该事件在当前 URL 的锚部分发生修改时触发。
onload 一张页面或一幅图像完成加载。 2
onpageshow 该事件在用户访问页面时触发
onpagehide 该事件在用户离开当前网页跳转到另外一个页面时触发
onresize 窗口或框架被重新调整大小。 2
onscroll 当文档被滚动时发生的事件。 2
onunload 用户退出页面。 ( <body> 和 <frameset>) 2

表單事件

属性 描述 DOM
onblur 元素失去焦点时触发 2
onchange 该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>) 2
onfocus 元素获取焦点时触发 2
onfocusin 元素即将获取焦点时触发 2
onfocusout 元素即将失去焦点时触发 2
oninput 元素获取用户输入时触发 3
onreset 表单重置时触发 2
onsearch 用户向搜索域输入文本时触发 ( <input="search">)  
onselect 用户选取文本时触发 ( <input> 和 <textarea>) 2
onsubmit 表单提交时触发 2

剪貼板事件

屬性 描述 DOM
oncopy 該事件在用戶拷貝元素內容時觸發
oncut 該事件在用戶剪切元素內容時觸發
onpaste 該事件在用戶粘貼元素內容時觸發

打印事件

屬性 描述 DOM
onafterprint 該事件在頁面已經開始打印,或者打印窗口已經關閉時觸發
onbeforeprint 該事件在頁面即將開始打印時觸發

拖動事件

事件 描述 DOM
ondrag 該事件在元素正在拖動時觸發
ondragend 該事件在用戶完成元素的拖動時觸發
ondragenter 該事件在拖動的元素進入放置目標時觸發
ondragleave 該事件在拖動元素離開放置目標時觸發
ondragover 該事件在拖動元素在放置目標上時觸發
ondragstart 該事件在用戶開始拖動元素時觸發
ondrop 該事件在拖動元素放置在目標區域時觸發

多媒體(Media)事件

事件 描述 DOM
onabort 事件在視頻/音頻(audio/video)終止加載時觸發。
oncanplay 事件在用戶可以開始播放視頻/音頻(audio/video)時觸發。
oncanplaythrough 事件在視頻/音頻(audio/video)可以正常播放且無需停頓和緩衝時觸發。
ondurationchange 事件在視頻/音頻(audio/video)的時長發生變化時觸發。
onemptied 當期播放列表為空時觸發
onended 事件在視頻/音頻(audio/video)播放結束時觸發。
onerror 事件在視頻/音頻(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 事件在視頻由於要播放下一幀而需要緩衝時觸發。

動畫事件

事件 描述 DOM
animationend 該事件在CSS 動畫結束播放時觸發
animationiteration 該事件在CSS 動畫重複播放時觸發
animationstart 該事件在CSS 動畫開始播放時觸發

過渡事件

事件 描述 DOM
transitionend 該事件在CSS 完成過渡後觸發。

其他事件

事件 描述 DOM
onmessage 該事件通過或者從對象(WebSocket, Web Worker, Event Source 或者子frame 或父窗口)接收到消息時觸發
onmousewheel 已廢棄。 使用onwheel事件替代
ononline 該事件在瀏覽器開始在線工作時觸發。
onoffline 該事件在瀏覽器開始離線工作時觸發。
onpopstate 該事件在窗口的瀏覽歷史(history 對象)發生改變時觸發。
onshow 該事件當<menu> 元素在上下文菜單顯示時觸發
onstorage 該事件在Web Storage(HTML 5 Web 存儲)更新時觸發
ontoggle 該事件在用戶打開或關閉<details> 元素時觸發
onwheel 該事件在鼠標滾輪在元素上下滾動時觸發

事件對象

常量

静态变量 描述 DOM
CAPTURING-PHASE 当前事件阶段为捕获阶段(3) 1
AT-TARGET 当前事件是目标阶段,在评估目标事件(1) 2
BUBBLING-PHASE 当前的事件为冒泡阶段 (2) 3

屬性

屬性 描述 DOM
bubbles 返回布爾值,指示事件是否是起泡事件類型。 2
cancelable 返回布爾值,指示事件是否可擁可取消的默認動作。 2
currentTarget 返回其事件監聽器觸發該事件的元素。 2
eventPhase 返回事件傳播的當前階段。 2
target 返回觸發此事件的元素(事件的目標節點)。 2
timeStamp 返回事件生成的日期和時間。 2
type 返回當前Event 對象表示的事件的名稱。 2

方法

方法 描述 DOM
initEvent() 初始化新创建的 Event 对象的属性。 2
preventDefault() 通知浏览器不要执行与事件关联的默认动作。 2
stopPropagation() 不再派发事件。 2

目標事件對象

方法

方法 描述 DOM
addEventListener() 允许在目标事件中注册监听事件(IE8 = attachEvent()) 2
dispatchEvent() 允许发送事件到监听器上 (IE8 = fireEvent()) 2
removeEventListener() 运行一次注册在事件目标上的监听事件(IE8 = detachEvent()) 2

事件監聽對象

方法

方法 描述 DOM
handleEvent() 把任意对象注册为事件处理程序 2

文檔事件對象

方法

方法 描述 DOM
createEvent() 2

鼠標/鍵盤事件對象

屬性

属性 描述 DOM
altKey 返回当事件被触发时,"ALT" 是否被按下。 2
button 返回当事件被触发时,哪个鼠标按钮被点击。 2
clientX 返回当事件被触发时,鼠标指针的水平坐标。 2
clientY 返回当事件被触发时,鼠标指针的垂直坐标。 2
ctrlKey 返回当事件被触发时,"CTRL" 键是否被按下。 2
Location 返回按键在设备上的位置 3
charCode 返回onkeypress事件触发键值的字母代码。 2
key 在按下按键时返回按键的标识符。 3
keyCode 返回onkeypress事件触发的键的值的字符代码,或者 onkeydown 或 onkeyup 事件的键的代码。 2
which 返回onkeypress事件触发的键的值的字符代码,或者 onkeydown 或 onkeyup 事件的键的代码。 2
metaKey 返回当事件被触发时,"meta" 键是否被按下。 2
relatedTarget 返回与事件的目标节点相关的节点。 2
screenX 返回当某个事件被触发时,鼠标指针的水平坐标。 2
screenY 返回当某个事件被触发时,鼠标指针的垂直坐标。 2
shiftKey 返回当事件被触发时,"SHIFT" 键是否被按下。 2

方法

方法 描述 W3C
initMouseEvent() 初始化鼠标事件对象的值 2
initKeyboardEvent() 初始化键盘事件对象的值 3