addEventListener() 方法用于向指定元素添加監(jiān)聽事件。且同一元素目標可重復(fù)添加钠导,不會覆蓋之前相同事件慕趴,配合 removeEventListener() 方法來移除事件。
使用方法:
document.getElementById(元素id).addEventListener("click", function(){
console.log("目標元素被點擊了");
});
參數(shù)說明:有三個參數(shù)
參數(shù)一急膀、事件名稱画株,字符串辆飘,必填。
事件名稱不用帶 "on" 前綴谓传,點擊事件直接寫:"click"蜈项,鍵盤放開事件寫:"keyup"參數(shù)二、執(zhí)行函數(shù)续挟,必填紧卒。
填寫需要執(zhí)行的函數(shù),如:function(){代碼...}
當目標對象事件觸發(fā)時诗祸,會傳入一個事件參數(shù)跑芳,參數(shù)名稱可自定義,如填寫event直颅,不需要也可不填寫博个。 事件對象的類型取決于特定的事件。例如功偿, “click” 事件屬于 MouseEvent(鼠標事件) 對象盆佣。
function(event){console.log(event)}參數(shù)三、觸發(fā)類型,布爾型共耍,可空
true - 事件在捕獲階段執(zhí)行
false - 事件在冒泡階段執(zhí)行虑灰,默認是false
參數(shù)一的事件類型大致有如下選擇(轉(zhuǎn)載)鼠標事件
click 當用戶點擊某個對象時調(diào)用的事件句柄。
contextmenu 在用戶點擊鼠標右鍵打開上下文菜單時觸發(fā)
dblclick 當用戶雙擊某個對象時調(diào)用的事件句柄痹兜。
mousedown 鼠標按鈕被按下穆咐。
mouseenter 當鼠標指針移動到元素上時觸發(fā)。
mouseleave 當鼠標指針移出元素時觸發(fā)
mousemove 鼠標被移動佃蚜。
mouseover 鼠標移到某元素之上。
mouseout 鼠標從某元素移開着绊。
mouseup 鼠標按鍵被松開谐算。鍵盤事件
屬性 描述 DOM
keydown 某個鍵盤按鍵被按下。
keypress 某個鍵盤按鍵被按下并松開归露。
keyup 某個鍵盤按鍵被松開洲脂。框架/對象(Frame/Object)事件
abort 圖像的加載被中斷。 ( )
beforeunload 該事件在即將離開頁面(刷新或關(guān)閉)時觸發(fā)
error 在加載文檔或圖像時發(fā)生錯誤剧包。 ( , 和 )
hashchange 該事件在當前 URL 的錨部分發(fā)生修改時觸發(fā)恐锦。
load 一張頁面或一幅圖像完成加載。
pageshow 該事件在用戶訪問頁面時觸發(fā)
pagehide 該事件在用戶離開當前網(wǎng)頁跳轉(zhuǎn)到另外一個頁面時觸發(fā)
resize 窗口或框架被重新調(diào)整大小疆液。
scroll 當文檔被滾動時發(fā)生的事件一铅。
unload 用戶退出頁面。 ( 和 )表單事件
blur 元素失去焦點時觸發(fā)
change 該事件在表單元素的內(nèi)容改變時觸發(fā)( , , , 和 )
focus 元素獲取焦點時觸發(fā)
focusin 元素即將獲取焦點是觸發(fā)
focusout 元素即將失去焦點是觸發(fā)
input 元素獲取用戶輸入是觸發(fā)
reset 表單重置時觸發(fā)
search 用戶向搜索域輸入文本時觸發(fā) (剪貼板事件
copy 該事件在用戶拷貝元素內(nèi)容時觸發(fā)
cut 該事件在用戶剪切元素內(nèi)容時觸發(fā)
paste 該事件在用戶粘貼元素內(nèi)容時觸發(fā)打印事件
afterprint 該事件在頁面已經(jīng)開始打印堕油,或者打印窗口已經(jīng)關(guān)閉時觸發(fā)
beforeprint 該事件在頁面即將開始打印時觸發(fā)拖動事件
drag 該事件在元素正在拖動時觸發(fā)
dragend 該事件在用戶完成元素的拖動時觸發(fā)
dragenter 該事件在拖動的元素進入放置目標時觸發(fā)
dragleave 該事件在拖動元素離開放置目標時觸發(fā)
dragover 該事件在拖動元素在放置目標上時觸發(fā)
dragstart 該事件在用戶開始拖動元素時觸發(fā)
drop 該事件在拖動元素放置在目標區(qū)域時觸發(fā)多媒體(Media)事件
abort 事件在視頻/音頻(audio/video)終止加載時觸發(fā)潘飘。
canplay 事件在用戶可以開始播放視頻/音頻(audio/video)時觸發(fā)。
canplaythrough 事件在視頻/音頻(audio/video)可以正常播放且無需停頓和緩沖時觸發(fā)掉缺。
durationchange 事件在視頻/音頻(audio/video)的時長發(fā)生變化時觸發(fā)卜录。
emptied The event occurs when the current playlist is empty
ended 事件在視頻/音頻(audio/video)播放結(jié)束時觸發(fā)。
error 事件在視頻/音頻(audio/video)數(shù)據(jù)加載期間發(fā)生錯誤時觸發(fā)眶明。
loadeddata 事件在瀏覽器加載視頻/音頻(audio/video)當前幀時觸發(fā)觸發(fā)艰毒。
loadedmetadata 事件在指定視頻/音頻(audio/video)的元數(shù)據(jù)加載后觸發(fā)。
loadstart 事件在瀏覽器開始尋找指定視頻/音頻(audio/video)觸發(fā)搜囱。
pause 事件在視頻/音頻(audio/video)暫停時觸發(fā)丑瞧。
play 事件在視頻/音頻(audio/video)開始播放時觸發(fā)。
playing 事件在視頻/音頻(audio/video)暫褪裰猓或者在緩沖后準備重新開始播放時觸發(fā)嗦篱。
progress 事件在瀏覽器下載指定的視頻/音頻(audio/video)時觸發(fā)。
ratechange 事件在視頻/音頻(audio/video)的播放速度發(fā)送改變時觸發(fā)幌缝。
seeked 事件在用戶重新定位視頻/音頻(audio/video)的播放位置后觸發(fā)灸促。
seeking 事件在用戶開始重新定位視頻/音頻(audio/video)時觸發(fā)。
stalled 事件在瀏覽器獲取媒體數(shù)據(jù),但媒體數(shù)據(jù)不可用時觸發(fā)浴栽。
suspend 事件在瀏覽器讀取媒體數(shù)據(jù)中止時觸發(fā)荒叼。
timeupdate 事件在當前的播放位置發(fā)送改變時觸發(fā)。
volumechange 事件在音量發(fā)生改變時觸發(fā)典鸡。
waiting 事件在視頻由于要播放下一幀而需要緩沖時觸發(fā)被廓。動畫事件
animationend 該事件在 CSS 動畫結(jié)束播放時觸發(fā)
animationiteration 該事件在 CSS 動畫重復(fù)播放時觸發(fā)
animationstart 該事件在 CSS 動畫開始播放時觸發(fā)過渡事件
transitionend 該事件在 CSS 完成過渡后觸發(fā)。其他事件
message 該事件通過或者從對象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息時觸發(fā)
online 該事件在瀏覽器開始在線工作時觸發(fā)
offline 該事件在瀏覽器開始離線工作時觸發(fā)
popstate 該事件在窗口的瀏覽歷史(history 對象)發(fā)生改變時觸發(fā)
show 該事件當元素在上下文菜單顯示時觸發(fā)
storage 該事件在 Web Storage(HTML 5 Web 存儲)更新時觸發(fā)
toggle 該事件在用戶打開或關(guān)閉 元素時觸發(fā)
wheel 該事件在鼠標滾輪在元素上下滾動時觸發(fā)