先看個(gè)例子：

document.getElementById("myBtn").addEventListener("click", function(){
    document.getElementById("demo").innerHTML = "Hello World";
});

定義和用法
addEventListener() 方法用于向指定元素添加事件句柄。

提示： 使用 removeEventListener() 方法來(lái)移除 addEventListener() 方法添加的事件句柄。
語(yǔ)法

element.addEventListener(event, function, useCapture)

參數(shù)值
event 必須。字符串，指定事件名。

注意: 不要使用 “on” 前綴。 例如，使用 “click” ,而不是使用 “onclick”。

function 必須。指定要事件觸發(fā)時(shí)執(zhí)行的函數(shù)。

當(dāng)事件對(duì)象會(huì)作為第一個(gè)參數(shù)傳入函數(shù)。 事件對(duì)象的類(lèi)型取決于特定的事件。例如， “click” 事件屬于 MouseEvent(鼠標(biāo)事件) 對(duì)象。
useCapture 可選。布爾值，指定事件是否在捕獲或冒泡階段執(zhí)行。

可能值:
true - 事件句柄在捕獲階段執(zhí)行
false- false- 默認(rèn)。事件句柄在冒泡階段執(zhí)行

event
鼠標(biāo)事件
click 當(dāng)用戶(hù)點(diǎn)擊某個(gè)對(duì)象時(shí)調(diào)用的事件句柄。
contextmenu 在用戶(hù)點(diǎn)擊鼠標(biāo)右鍵打開(kāi)上下文菜單時(shí)觸發(fā)
dblclick 當(dāng)用戶(hù)雙擊某個(gè)對(duì)象時(shí)調(diào)用的事件句柄。
mousedown 鼠標(biāo)按鈕被按下。
mouseenter 當(dāng)鼠標(biāo)指針移動(dòng)到元素上時(shí)觸發(fā)。
mouseleave 當(dāng)鼠標(biāo)指針移出元素時(shí)觸發(fā)
mousemove 鼠標(biāo)被移動(dòng)。
mouseover 鼠標(biāo)移到某元素之上。
mouseout 鼠標(biāo)從某元素移開(kāi)。
mouseup 鼠標(biāo)按鍵被松開(kāi)。

鍵盤(pán)事件
屬性 描述 DOM
keydown 某個(gè)鍵盤(pán)按鍵被按下。
keypress 某個(gè)鍵盤(pán)按鍵被按下并松開(kāi)。
keyup 某個(gè)鍵盤(pán)按鍵被松開(kāi)。

框架/對(duì)象（Frame/Object）事件
abort 圖像的加載被中斷。 ( )
beforeunload 該事件在即將離開(kāi)頁(yè)面（刷新或關(guān)閉）時(shí)觸發(fā)
error 在加載文檔或圖像時(shí)發(fā)生錯(cuò)誤。 ( , 和 )
hashchange 該事件在當(dāng)前 URL 的錨部分發(fā)生修改時(shí)觸發(fā)。
load 一張頁(yè)面或一幅圖像完成加載。
pageshow 該事件在用戶(hù)訪(fǎng)問(wèn)頁(yè)面時(shí)觸發(fā)
pagehide 該事件在用戶(hù)離開(kāi)當(dāng)前網(wǎng)頁(yè)跳轉(zhuǎn)到另外一個(gè)頁(yè)面時(shí)觸發(fā)
resize 窗口或框架被重新調(diào)整大小。
scroll 當(dāng)文檔被滾動(dòng)時(shí)發(fā)生的事件。
unload 用戶(hù)退出頁(yè)面。 ( 和 )

表單事件
blur 元素失去焦點(diǎn)時(shí)觸發(fā)
change 該事件在表單元素的內(nèi)容改變時(shí)觸發(fā)( , , , 和 )
focus 元素獲取焦點(diǎn)時(shí)觸發(fā)
focusin 元素即將獲取焦點(diǎn)是觸發(fā)
focusout 元素即將失去焦點(diǎn)是觸發(fā)
input 元素獲取用戶(hù)輸入是觸發(fā)
reset 表單重置時(shí)觸發(fā)
search 用戶(hù)向搜索域輸入文本時(shí)觸發(fā) (

剪貼板事件
copy 該事件在用戶(hù)拷貝元素內(nèi)容時(shí)觸發(fā)
cut 該事件在用戶(hù)剪切元素內(nèi)容時(shí)觸發(fā)
paste 該事件在用戶(hù)粘貼元素內(nèi)容時(shí)觸發(fā)

打印事件
afterprint 該事件在頁(yè)面已經(jīng)開(kāi)始打印，或者打印窗口已經(jīng)關(guān)閉時(shí)觸發(fā)
beforeprint 該事件在頁(yè)面即將開(kāi)始打印時(shí)觸發(fā)

拖動(dòng)事件
drag 該事件在元素正在拖動(dòng)時(shí)觸發(fā)
dragend 該事件在用戶(hù)完成元素的拖動(dòng)時(shí)觸發(fā)
dragenter 該事件在拖動(dòng)的元素進(jìn)入放置目標(biāo)時(shí)觸發(fā)
dragleave 該事件在拖動(dòng)元素離開(kāi)放置目標(biāo)時(shí)觸發(fā)
dragover 該事件在拖動(dòng)元素在放置目標(biāo)上時(shí)觸發(fā)
dragstart 該事件在用戶(hù)開(kāi)始拖動(dòng)元素時(shí)觸發(fā)
drop 該事件在拖動(dòng)元素放置在目標(biāo)區(qū)域時(shí)觸發(fā)

多媒體（Media）事件
abort 事件在視頻/音頻（audio/video）終止加載時(shí)觸發(fā)。
canplay 事件在用戶(hù)可以開(kāi)始播放視頻/音頻（audio/video）時(shí)觸發(fā)。
canplaythrough 事件在視頻/音頻（audio/video）可以正常播放且無(wú)需停頓和緩沖時(shí)觸發(fā)。
durationchange 事件在視頻/音頻（audio/video）的時(shí)長(zhǎng)發(fā)生變化時(shí)觸發(fā)。
emptied The event occurs when the current playlist is empty
ended 事件在視頻/音頻（audio/video）播放結(jié)束時(shí)觸發(fā)。
error 事件在視頻/音頻（audio/video）數(shù)據(jù)加載期間發(fā)生錯(cuò)誤時(shí)觸發(fā)。
loadeddata 事件在瀏覽器加載視頻/音頻（audio/video）當(dāng)前幀時(shí)觸發(fā)觸發(fā)。
loadedmetadata 事件在指定視頻/音頻（audio/video）的元數(shù)據(jù)加載后觸發(fā)。
loadstart 事件在瀏覽器開(kāi)始尋找指定視頻/音頻（audio/video）觸發(fā)。
pause 事件在視頻/音頻（audio/video）暫停時(shí)觸發(fā)。
play 事件在視頻/音頻（audio/video）開(kāi)始播放時(shí)觸發(fā)。
playing 事件在視頻/音頻（audio/video）暫?；蛘咴诰彌_后準(zhǔn)備重新開(kāi)始播放時(shí)觸發(fā)。
progress 事件在瀏覽器下載指定的視頻/音頻（audio/video）時(shí)觸發(fā)。
ratechange 事件在視頻/音頻（audio/video）的播放速度發(fā)送改變時(shí)觸發(fā)。
seeked 事件在用戶(hù)重新定位視頻/音頻（audio/video）的播放位置后觸發(fā)。
seeking 事件在用戶(hù)開(kāi)始重新定位視頻/音頻（audio/video）時(shí)觸發(fā)。
stalled 事件在瀏覽器獲取媒體數(shù)據(jù)，但媒體數(shù)據(jù)不可用時(shí)觸發(fā)。
suspend 事件在瀏覽器讀取媒體數(shù)據(jù)中止時(shí)觸發(fā)。
timeupdate 事件在當(dāng)前的播放位置發(fā)送改變時(shí)觸發(fā)。
volumechange 事件在音量發(fā)生改變時(shí)觸發(fā)。
waiting 事件在視頻由于要播放下一幀而需要緩沖時(shí)觸發(fā)。

動(dòng)畫(huà)事件
animationend 該事件在 CSS 動(dòng)畫(huà)結(jié)束播放時(shí)觸發(fā)
animationiteration 該事件在 CSS 動(dòng)畫(huà)重復(fù)播放時(shí)觸發(fā)
animationstart 該事件在 CSS 動(dòng)畫(huà)開(kāi)始播放時(shí)觸發(fā)

過(guò)渡事件
transitionend 該事件在 CSS 完成過(guò)渡后觸發(fā)。

其他事件
message 該事件通過(guò)或者從對(duì)象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息時(shí)觸發(fā)
online 該事件在瀏覽器開(kāi)始在線(xiàn)工作時(shí)觸發(fā)。
offline 該事件在瀏覽器開(kāi)始離線(xiàn)工作時(shí)觸發(fā)。
popstate 該事件在窗口的瀏覽歷史（history 對(duì)象）發(fā)生改變時(shí)觸發(fā)。 event occurs when the window’s history changes
show 該事件當(dāng)

元素在上下文菜單顯示時(shí)觸發(fā)
storage 該事件在 Web Storage(HTML 5 Web 存儲(chǔ))更新時(shí)觸發(fā)
toggle 該事件在用戶(hù)打開(kāi)或關(guān)閉 元素時(shí)觸發(fā)
wheel 該事件在鼠標(biāo)滾輪在元素上下滾動(dòng)時(shí)觸發(fā)
————————————————
版權(quán)聲明：本文為CSDN博主「@木塵」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/vincentblog/article/details/50629091