2. 程式人生 > >HTML DOM事件

HTML DOM事件

阿新 • • 發佈：2017-10-11
copy 常用 iter hist oca nco res chang list

HTML DOM 事件

常用事件

事件描述
onchange HTML 元素改變
onclick 用戶點擊 HTML 元素
onmouseover 用戶在一個HTML元素上移動鼠標
onmouseout 用戶從一個HTML元素上移開鼠標
onkeydown 用戶按下鍵盤按鍵
onload 瀏覽器已完成頁面的加載

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 當前事件階段為捕獲階段(1) 1
AT-TARGET 當前事件是目標階段,在評估目標事件(1) 2
BUBBLING-PHASE 當前的事件為冒泡階段 (3) 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

HTML DOM事件

相關推薦

JavaScript HTML DOM 事件

pan 代碼 inner date load ntb 用戶 按鈕 scrip 對事件做出反應 我們可以在事件發生時執行 JavaScript，比如當用戶在 HTML 元素上點擊時。 如需在用戶點擊某個元素時執行代碼，請向一個 HTML 事件屬性添加 JavaScript 代

JavaScript HTML DOM事件

splay nbsp onload style blog div 提交 cookies cti HTML DOM 使javaScript有能力對HTML事件作出反應。 HTML事件的例子： 當用戶點擊鼠標時 當網頁已加載時 當圖像已加載時 當鼠標移動到元素上時 當輸入字段

HTML DOM事件

copy 常用 iter hist oca nco res chang list HTML DOM 事件 常用事件 事件描述 onchange HTML 元素改變 onclick 用戶點擊 HTML 元素 onmouseover 用戶在一個HTML元素上移動

JavaScript HTML DOM+事件+節點與元素

1.HTML DOM (文件物件模型) 通過 HTML DOM，可訪問 JavaScript HTML 文件的所有元素。 1.JavaScript 能夠改變頁面中的所有 HTML 元素 （1）查詢 HTML 元素： 通過 id 找到 HTML 元素:document.getElem

使用HTML DOM 來分配事件 —— onmouseover和onmouseout ，onmousedown和onmouseup

wid bsp this 謝謝 seo -c png 代碼 inner 一， onmouseover 和 onmouseout 事件 onmouseover 和 onmouseout 事件可用於在用戶的鼠標移至 HTML 元素上方或移出元素時觸發函數。 一個小例：鼠標未在上

如何用vue 語法 給html元素繫結原生js DOM 事件

問題描述： 最近在使用vue全家桶開發頁面，而且也是剛入門vue，很多vue的東西都是現學現用。 想要給一個html元素繫結DOM事件，我以前 肯定是用javascipt 的DOM 操作，但是既然專案用了vuejs ，我就想用vuejs實現一下，但是官方文件的這塊寫的非常簡

HTML DOM item() 方法

child best ner == asc ctype sre 回文 代碼 一直不知道javascript還有類似jQ裏面eq()的函數，原來原生javascript的item()有類似功能： 由於是原生javascript,先補習下children和childNodes

Dom 事件和JavaScript的詞法分析過程

javascript dom event dom自帶了很多事件，常見的如下所示當觸發這些事件的時候，我們可以執行自定義的各種函數。一般說來，綁定事件有3種方法。第一種方法，直接在標簽上面綁定，比如<input id=‘i1‘ type=‘button‘ onclick=‘ClickOn(th

HTML DOM addEventListener() 方法

innerhtml err 版本號 list 更多 use run afa 手冊 定義和用法 addEventListener() 方法用於向指定元素添加事件句柄。 提示： 使用 removeEventListener() 方法來移除 addEventListener()

DOM事件第二彈（UIEvent事件）

復合 綁定 階段 posit 5.1 ble pat fun 出錯 此文章主要總結UIEvent相關的事件，如有不對的地方，歡迎指正。 一、uitls.js(綁定事件公共類) var fixs = { ‘focusin‘: { stand

核心DOM和html DOM的區別

技術分享 row 標簽 node splay out mov ... tex DOM分為三部分： （1）核心DOM：遍歷DOM樹、添加新節點、刪除節點、修改節點 （2）HTML DOM：以一種簡便的方法訪問DOM樹 （3）XML DOM：準用於操作XML文檔 核心D

HTML的事件屬性

常見 按鍵 script 調整 能夠 can javascrip 記錄 com 全局事件屬性 HTML 4 增加了使事件在瀏覽器中觸發動作的能力，比如當用戶點擊元素時啟動 JavaScript。當在HTML5中有了更多新屬性，但是對HTML4的兼容性卻沒有達到全部。 下面列

HTML DOM 屬性

使用 tab 簡單方法 htm 文本節點 undefined text 大寫 null innerHTML 屬性 獲取元素內容的最簡單方法是使用 innerHTML 屬性。 innerHTML 屬性對於獲取或替換 HTML 元素的內容很有用。 實例 下面的代碼獲取 id="

JavaScript HTML DOM

文檔 pre tel mod 實例 最簡 nts model images 通過 HTML DOM，可訪問 JavaScript HTML 文檔的所有元素。 HTML DOM （文檔對象模型） 當網頁被加載時，瀏覽器會創建頁面的文檔對象模型（Document Object

JavaScript HTML DOM 元素（節點）

enc javascrip item pan 效果 demo 移動元素 成功 append 在文檔對象模型 (DOM) 中，每個節點都是一個對象。DOM 節點有三個重要的屬性 ： 1. nodeName : 節點的名稱 2. nodeValue ：節點的值 3. no

JavaScript HTML DOM - 改變CSS

head char document ctype .cn body pre 語法 logs 改變 HTML 樣式 //語法document.getElementById(id).style.property=new style <p id="p2">He

HTML DOM 實例

htm domain 主機 idt type hspa 內容 doctype 輸入文本 Document 對象 返回文檔中錨的數目 document.write(document.anchors.length);//document會覆蓋原網頁 返回文檔中第一個錨的 i

javascript--- HTML DOM

web post 動態頁面 編程 結構化 認知 部分 方法 -- 看了這個題目，不知聰明的讀者會有什麽樣的感覺？這篇文章將要講javascript和DOM的關系呢？還是要講javascript的DOM?在這裏我首先就講明文章的主旨有兩點：什麽

HTML DOM 第五篇

不同版本 按鍵 javascrip 點擊 div 開元 按鈕 驗證 瀏覽器類型 通過 HTML DOM，JavaScript 能夠訪問 HTML 文檔中的每個元素。 HTML DOM 允許您在事件發生時執行代碼。 當 HTML 元素"有事情發生"時，瀏覽器就會生成事件：

HTML DOM節點的增刪改查

自己 div text dom節點 定義 pos 就會 fcm .get 上篇博客中，我們已經初步接觸了DOM基礎，可是我們學習是為了可以更好地應用，今天我們就來看看DOM節點的增刪改查。 無論在哪裏，我們想要操作一個東西，總是應該先去獲得它。那麽