## HTML DOM 事件 [https://developer.mozilla.org/zh-CN/docs/Web/Events](https://developer.mozilla.org/zh-CN/docs/Web/Events) Web平臺提供了多種方式來獲取 DOM events 的通知。兩種常見的風格是：廣義 addEventListener() 和一組特定的on-event處理器。 觸發事件: ~~~js 方法1： /* 參數： 1.事件的字符串,不要on 2.回調函數,當事件觸發時該函數會被調用 3·是否在捕獲階段觸發事件,需要一個布爾值,一般都傳false 使用addEventListener()可以同時為一個元素的相同事件同時綁定多個響應函數, 這樣當事件被觸發時,響應函數將會按照函數的綁定順序執行,IE8及以下不支持此方法 */ document.addEventListener('keyup', (event) => { const keyName1 = event.key; //... }, false); document.addEventListener('keyup', (event) => { const keyName2 = event.key; //... }, false); /* 在IE8中可以使用attachEvent()來綁定事件 參數： 1.事件的字符串,要on 2.回調函數 */ element.attachEvent('onclick',function() { //... }); //方法2:on-event處理器是由DOM元素提供的一組屬性，以幫助管理元素如何對事件反應 element.onclick=function(event){ } //除了標簽對象以外，window, document, XMLHttpRequest，AudioNode，AudioContext 等等也具有on-event ~~~ 兼容： ``` /*定義一個函數,用來為指定元素綁定響應函數 addEventListener()中的this,是綁定事件的對象 attachEvent()中的this, 是window 需要統一兩個方法this 參數: obj要綁定事件的對象 eventstr事件的字符串 callback回調函數 */ function bind(obj,eventStr,callback){ if(obj.addEventListener){ obj.addEventListener(eventStr,callback,false); }else{ //obj.attachEvent("on"+eventStr,callback); //統一執行順序：callback.call(obj) obj.attachEvent("on"+eventStr,function(){ callback.call(obj); }); } } ``` 事件的傳播 關于事件的傳播網景公司和微軟公司有不同的理解 -微軟公司認為事件應該是由內向外傳播,也就是當事件觸發時,應該先觸發當前元素上的事件然后再向當前元素的祖先元素上傳播,也就說事件應該在冒泡階段執行 -網景公司認為事件應該是由外向內傳播的,也就是當前事件觸發時,應該先觸發當前元素的最外層的祖先元素的事件然后在向內傳播給后代元素 -W3C綜合了兩個公司的方案,將事件傳播分成了三個階段 1,捕獲階段:在捕獲階段時從最外層的祖先元素,向目標元素進行事件的捕獲,但是默認此時不會觸發事件 2.目標階段:事件捕獲到目標元素,捕獲結束開始在目標元素上觸發事件 3.冒泡階段:事件從目標元素向他的祖先元素傳遞,依飲觸發祖先元素上的事件 如果希望在捕獲階段就觸發事件,可以將addEventListener()的第三個參數設置為true一般情況下我們不會希望在捕獲階段觸發事件,所以這個參數一般都是false IE8及以下沒有捕獲階段 ## 鼠標事件 | 屬性 | 描述 | DOM | | :-- | :-- | :-- | | [onclick](https://www.runoob.com/jsref/event-onclick.html) | 當用戶點擊某個對象時調用的事件句柄。 | 2 | | [oncontextmenu](https://www.runoob.com/jsref/event-oncontextmenu.html) | 在用戶點擊鼠標右鍵打開上下文菜單時觸發 | ? | | [ondblclick](https://www.runoob.com/jsref/event-ondblclick.html) | 當用戶雙擊某個對象時調用的事件句柄。 | 2 | | [onmousedown](https://www.runoob.com/jsref/event-onmousedown.html) | 鼠標按鈕被按下。 | 2 | | [onmouseenter](https://www.runoob.com/jsref/event-onmouseenter.html) | 當鼠標指針移動到元素上時觸發。 | 2 | | [onmouseleave](https://www.runoob.com/jsref/event-onmouseleave.html) | 當鼠標指針移出元素時觸發 | 2 | | [onmousemove](https://www.runoob.com/jsref/event-onmousemove.html) | 鼠標被移動。 | 2 | | [onmouseover](https://www.runoob.com/jsref/event-onmouseover.html) | 鼠標移到某元素之上。 | 2 | | [onmouseout](https://www.runoob.com/jsref/event-onmouseout.html) | 鼠標從某元素移開。 | 2 | | [onmouseup](https://www.runoob.com/jsref/event-onmouseup.html) | 鼠標按鍵被松開。 | 2 | ## 鍵盤事件 | 屬性 | 描述 | DOM | | :-- | :-- | :-- | | [onkeydown](https://www.runoob.com/jsref/event-onkeydown.html) | 某個鍵盤按鍵被按下。 | 2 | | [onkeypress](https://www.runoob.com/jsref/event-onkeypress.html) | 某個鍵盤按鍵被按下并松開。 | 2 | | [onkeyup](https://www.runoob.com/jsref/event-onkeyup.html) | 某個鍵盤按鍵被松開。 | 2 | ## 框架/對象（Frame/Object）事件 | 屬性 | 描述 | DOM | | :-- | :-- | :-- | | [onabort](https://www.runoob.com/jsref/event-onabort.html) | 圖像的加載被中斷。 ( ) | 2 | | [onbeforeunload](https://www.runoob.com/jsref/event-onbeforeunload.html) | 該事件在即將離開頁面（刷新或關閉）時觸發 | 2 | | [onerror](https://www.runoob.com/jsref/event-onerror.html) | 在加載文檔或圖像時發生錯誤。 ( , 和 ) | ? | | [onhashchange](https://www.runoob.com/jsref/event-onhashchange.html) | 該事件在當前 URL 的錨部分發生修改時觸發。 | ? | | [onload](https://www.runoob.com/jsref/event-onload.html) | 一張頁面或一幅圖像完成加載。 | 2 | | [onpageshow](https://www.runoob.com/jsref/event-onpageshow.html) | 該事件在用戶訪問頁面時觸發 | | | [onpagehide](https://www.runoob.com/jsref/event-onpagehide.html) | 該事件在用戶離開當前網頁跳轉到另外一個頁面時觸發 | | | [onresize](https://www.runoob.com/jsref/event-onresize.html) | 窗口或框架被重新調整大小。 | 2 | | [onscroll](https://www.runoob.com/jsref/event-onscroll.html) | 當文檔被滾動時發生的事件。 | 2 | | [onunload](https://www.runoob.com/jsref/event-onunload.html) | 用戶退出頁面。 ( 和 ) | 2 | ## 表單事件 | 屬性 | 描述 | DOM | | --- | --- | --- | | [onblur](https://www.runoob.com/jsref/event-onblur.html) | 元素失去焦點時觸發 | 2 | | [onchange](https://www.runoob.com/jsref/event-onchange.html) | 該事件在表單元素的內容改變時觸發( , , , 和 ) | 2 | | [onfocus](https://www.runoob.com/jsref/event-onfocus.html) | 元素獲取焦點時觸發 | 2 | | [onfocusin](https://www.runoob.com/jsref/event-onfocusin.html) | 元素即將獲取焦點時觸發 | 2 | | [onfocusout](https://www.runoob.com/jsref/event-onfocusout.html) | 元素即將失去焦點時觸發 | 2 | | [oninput](https://www.runoob.com/jsref/event-oninput.html) | 元素獲取用戶輸入時觸發 | 3 | | [onreset](https://www.runoob.com/jsref/event-onreset.html) | 表單重置時觸發 | 2 | | [onsearch](https://www.runoob.com/jsref/event-onsearch.html) | 用戶向搜索域輸入文本時觸發 ( ) | ? | | [onselect](https://www.runoob.com/jsref/event-onselect.html) | 用戶選取文本時觸發 ( 和 ) | 2 | | [onsubmit](https://www.runoob.com/jsref/event-onsubmit.html) | 表單提交時觸發 | 2 | ## 剪貼板事件 | 屬性 | 描述 | DOM | | --- | --- | --- | | [oncopy](https://www.runoob.com/jsref/event-oncopy.html) | 該事件在用戶拷貝元素內容時觸發 | ? | | [oncut](https://www.runoob.com/jsref/event-oncut.html) | 該事件在用戶剪切元素內容時觸發 | ? | | [onpaste](https://www.runoob.com/jsref/event-onpaste.html) | 該事件在用戶粘貼元素內容時觸發 | ? | ## 打印事件 | 屬性 | 描述 | DOM | | --- | --- | --- | | [onafterprint](https://www.runoob.com/jsref/event-onafterprint.html) | 該事件在頁面已經開始打印，或者打印窗口已經關閉時觸發 | ? | | [onbeforeprint](https://www.runoob.com/jsref/event-onbeforeprint.html) | 該事件在頁面即將開始打印時觸發 | ? | ## 拖動事件 | 事件 | 描述 | DOM | | --- | --- | --- | | [ondrag](https://www.runoob.com/jsref/event-ondrag.html) | 該事件在元素正在拖動時觸發 | ? | | [ondragend](https://www.runoob.com/jsref/event-ondragend.html) | 該事件在用戶完成元素的拖動時觸發 | ? | | [ondragenter](https://www.runoob.com/jsref/event-ondragenter.html) | 該事件在拖動的元素進入放置目標時觸發 | ? | | [ondragleave](https://www.runoob.com/jsref/event-ondragleave.html) | 該事件在拖動元素離開放置目標時觸發 | ? | | [ondragover](https://www.runoob.com/jsref/event-ondragover.html) | 該事件在拖動元素在放置目標上時觸發 | ? | | [ondragstart](https://www.runoob.com/jsref/event-ondragstart.html) | 該事件在用戶開始拖動元素時觸發 | ? | | [ondrop](https://www.runoob.com/jsref/event-ondrop.html) | 該事件在拖動元素放置在目標區域時觸發 | ? | ## 多媒體（Media）事件 | 事件 | 描述 | DOM | | --- | --- | --- | | [onabort](https://www.runoob.com/jsref/event-onabort-media.html) | 事件在視頻/音頻（audio/video）終止加載時觸發。 | ? | | [oncanplay](https://www.runoob.com/jsref/event-oncanplay.html) | 事件在用戶可以開始播放視頻/音頻（audio/video）時觸發。 | ? | | [oncanplaythrough](https://www.runoob.com/jsref/event-oncanplaythrough.html) | 事件在視頻/音頻（audio/video）可以正常播放且無需停頓和緩沖時觸發。 | ? | | [ondurationchange](https://www.runoob.com/jsref/event-ondurationchange.html) | 事件在視頻/音頻（audio/video）的時長發生變化時觸發。 | ? | | onemptied | 當期播放列表為空時觸發 | ? | | [onended](https://www.runoob.com/jsref/event-onended.html) | 事件在視頻/音頻（audio/video）播放結束時觸發。 | ? | | [onerror](https://www.runoob.com/jsref/event-onerror-media.html) | 事件在視頻/音頻（audio/video）數據加載期間發生錯誤時觸發。 | ? | | [onloadeddata](https://www.runoob.com/jsref/event-onloadeddata.html) | 事件在瀏覽器加載視頻/音頻（audio/video）當前幀時觸發觸發。 | ? | | [onloadedmetadata](https://www.runoob.com/jsref/event-onloadedmetadata.html) | 事件在指定視頻/音頻（audio/video）的元數據加載后觸發。 | ? | | [onloadstart](https://www.runoob.com/jsref/event-onloadstart.html) | 事件在瀏覽器開始尋找指定視頻/音頻（audio/video）觸發。 | ? | | [onpause](https://www.runoob.com/jsref/event-onpause.html) | 事件在視頻/音頻（audio/video）暫停時觸發。 | ? | | [onplay](https://www.runoob.com/jsref/event-onplay.html) | 事件在視頻/音頻（audio/video）開始播放時觸發。 | ? | | [onplaying](https://www.runoob.com/jsref/event-onplaying.html) | 事件在視頻/音頻（audio/video）暫停或者在緩沖后準備重新開始播放時觸發。 | ? | | [onprogress](https://www.runoob.com/jsref/event-onprogress.html) | 事件在瀏覽器下載指定的視頻/音頻（audio/video）時觸發。 | ? | | [onratechange](https://www.runoob.com/jsref/event-onratechange.html) | 事件在視頻/音頻（audio/video）的播放速度發送改變時觸發。 | ? | | [onseeked](https://www.runoob.com/jsref/event-onseeked.html) | 事件在用戶重新定位視頻/音頻（audio/video）的播放位置后觸發。 | ? | | [onseeking](https://www.runoob.com/jsref/event-onseeking.html) | 事件在用戶開始重新定位視頻/音頻（audio/video）時觸發。 | ? | | [onstalled](https://www.runoob.com/jsref/event-onstalled.html) | 事件在瀏覽器獲取媒體數據，但媒體數據不可用時觸發。 | ? | | [onsuspend](https://www.runoob.com/jsref/event-onsuspend.html) | 事件在瀏覽器讀取媒體數據中止時觸發。 | ? | | [ontimeupdate](https://www.runoob.com/jsref/event-ontimeupdate.html) | 事件在當前的播放位置發送改變時觸發。 | ? | | [onvolumechange](https://www.runoob.com/jsref/event-onvolumechange.html) | 事件在音量發生改變時觸發。 | ? | | [onwaiting](https://www.runoob.com/jsref/event-onwaiting.html) | 事件在視頻由于要播放下一幀而需要緩沖時觸發。 | ? | ## 動畫事件 | 事件 | 描述 | DOM | | --- | --- | --- | | [animationend](https://www.runoob.com/jsref/event-animationend.html) | 該事件在 CSS 動畫結束播放時觸發 | ? | | [animationiteration](https://www.runoob.com/jsref/event-animationiteration.html) | 該事件在 CSS 動畫重復播放時觸發 | ? | | [animationstart](https://www.runoob.com/jsref/event-animationstart.html) | 該事件在 CSS 動畫開始播放時觸發 | ? | ## 過渡事件 | 事件 | 描述 | DOM | | --- | --- | --- | | [transitionend](https://www.runoob.com/jsref/event-transitionend.html) | 該事件在 CSS 完成過渡后觸發。 | ? | ## 其他事件 | 事件 | 描述 | DOM | | --- | --- | --- | | onmessage | 該事件通過或者從對象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息時觸發 | ? | | onmousewheel | 已廢棄。使用[onwheel](https://www.runoob.com/jsref/event-onwheel.html)事件替代 | ? | | [ononline](https://www.runoob.com/jsref/event-ononline.html) | 該事件在瀏覽器開始在線工作時觸發。 | ? | | [onoffline](https://www.runoob.com/jsref/event-onoffline.html) | 該事件在瀏覽器開始離線工作時觸發。 | ? | | onpopstate | 該事件在窗口的瀏覽歷史（history 對象）發生改變時觸發。 | ? | | [onshow](https://www.runoob.com/jsref/event-onshow.html) | 該事件當 元素在上下文菜單顯示時觸發 | ? | | onstorage | 該事件在 Web Storage(HTML 5 Web 存儲)更新時觸發 | ? | | [ontoggle](https://www.runoob.com/jsref/event-ontoggle.html) | 該事件在用戶打開或關閉 元素時觸發 | ? | | [onwheel](https://www.runoob.com/jsref/event-onwheel.html) | 該事件在鼠標滾輪在元素上下滾動時觸發 | ? |