?該方法用于向瀏覽器窗口注冊事件監聽器,當指定的事件(如單擊、按鍵按下)被觸發時,瀏覽器會自動調用指定的函數(回調函數)。
window.addEventListener(event, function, useCapture);
參數說明:
event
: 要監聽的事件名稱,如 'click'(表示單擊事件)、'keydown'(表示鍵盤按鍵按下事件)等。function
: 事件觸發時要調用的函數(回調函數)。useCapture
: 可選參數,表示事件是否在捕獲階段觸發,是一個布爾值,一般不用設置,默認為 false(表示在冒泡階段觸發)。
?示例:
mounted () {window.addEventListener('mousedown', this.handleMousedown)//監聽鼠標按下window.addEventListener('mouseup', this.handleMouseup)//監聽鼠標抬起window.addEventListener('keydown', this.handlekeydown)//監聽鍵盤按下},methods: {// 鼠標按下事件handleMousedown (e) {if (e.button == 0) {console.log('鼠標左鍵按下')}if (e.button == 1) {console.log('鼠標滾動鍵按下')}if (e.button == 2) {console.log('鼠標右鍵按下')}console.log(e.pageX, e.pageY)// 坐標},// 鼠標抬起事件handleMouseup (e) {if (e.button == 0) {console.log('鼠標左鍵抬起')}if (e.button == 1) {console.log('鼠標滾動鍵抬起')}if (e.button == 2) {console.log('鼠標右鍵抬起')}console.log(e.pageX, e.pageY)// 坐標},// 監聽鍵盤事件handlekeydown (e) {console.log(e)}},
常用事件:
鼠標事件
屬性? 描述?
click? 鼠標單擊某個對象時。
contextmenu? 鼠標右鍵
dblclick? 鼠標雙擊某個對象時。
mousedown? 鼠標按鈕被按下。
mouseenter? 當鼠標指針移動到元素上時。
mouseleave? 當鼠標指針移出元素時
mousemove 鼠標被移動。
mouseover 鼠標移到某元素之上。
mouseout 鼠標從某元素移開。
mouseup 鼠標按鍵被松開。鍵盤事件
keydown 某個鍵盤按鍵被按下。
keypress 某個鍵盤按鍵被按下(與上一個區別就是不識別功能鍵,比如ctrl 箭頭 tab等等)。
keyup 某個鍵盤按鍵被松開。
執行順序:keydown ----keypress ----keyup
鍵盤事件里的keyCode屬性可以得到相應鍵的ASCII碼值框架/對象(Frame/Object)事件
abort 圖像的加載被中斷。 ( )
beforeunload 該事件在即將離開頁面(刷新或關閉)時觸發
error 在加載文檔或圖像時發生錯誤。 ( , 和 )
hashchange 該事件在當前 URL 的錨部分發生修改時觸發。
load 一張頁面或一幅圖像完成加載。
pageshow 該事件在用戶訪問頁面時觸發
pagehide 該事件在用戶離開當前網頁跳轉到另外一個頁面時觸發
resize 窗口或框架被重新調整大小。
scroll 當文檔被滾動時發生的事件。
unload 用戶退出頁面。表單事件
blur 元素失去焦點時觸發
change 該事件在表單元素的內容改變時觸發( , , , 和 )
focus 元素獲取焦點時觸發
focusin 元素即將獲取焦點是觸發
focusout 元素即將失去焦點是觸發
input 元素獲取用戶輸入是觸發
reset 表單重置時觸發
search 用戶向搜索域輸入文本時觸發剪貼板事件
copy 該事件在用戶拷貝元素內容時觸發
cut 該事件在用戶剪切元素內容時觸發
paste 該事件在用戶粘貼元素內容時觸發打印事件
afterprint 該事件在頁面已經開始打印,或者打印窗口已經關閉時觸發
beforeprint 該事件在頁面即將開始打印時觸發拖動事件
drag 該事件在元素正在拖動時觸發
dragend 該事件在用戶完成元素的拖動時觸發
dragenter 該事件在拖動的元素進入放置目標時觸發
dragleave 該事件在拖動元素離開放置目標時觸發
dragover 該事件在拖動元素在放置目標上時觸發
dragstart 該事件在用戶開始拖動元素時觸發
drop 該事件在拖動元素放置在目標區域時觸發多媒體(Media)事件
abort 事件在視頻/音頻(audio/video)終止加載時觸發。
canplay 事件在用戶可以開始播放視頻/音頻(audio/video)時觸發。
canplaythrough 事件在視頻/音頻(audio/video)可以正常播放且無需停頓和緩沖時觸發。
durationchange 事件在視頻/音頻(audio/video)的時長發生變化時觸發。
emptied The event occurs when the current playlist is empty
ended 事件在視頻/音頻(audio/video)播放結束時觸發。
error 事件在視頻/音頻(audio/video)數據加載期間發生錯誤時觸發。
loadeddata 事件在瀏覽器加載視頻/音頻(audio/video)當前幀時觸發觸發。
loadedmetadata 事件在指定視頻/音頻(audio/video)的元數據加載后觸發。
loadstart 事件在瀏覽器開始尋找指定視頻/音頻(audio/video)觸發。
pause 事件在視頻/音頻(audio/video)暫停時觸發。
play 事件在視頻/音頻(audio/video)開始播放時觸發。
playing 事件在視頻/音頻(audio/video)暫停或者在緩沖后準備重新開始播放時觸發。
progress 事件在瀏覽器下載指定的視頻/音頻(audio/video)時觸發。
ratechange 事件在視頻/音頻(audio/video)的播放速度發送改變時觸發。
seeked 事件在用戶重新定位視頻/音頻(audio/video)的播放位置后觸發。
seeking 事件在用戶開始重新定位視頻/音頻(audio/video)時觸發。
stalled 事件在瀏覽器獲取媒體數據,但媒體數據不可用時觸發。
suspend 事件在瀏覽器讀取媒體數據中止時觸發。
timeupdate 事件在當前的播放位置發送改變時觸發。
volumechange 事件在音量發生改變時觸發。
waiting 事件在視頻由于要播放下一幀而需要緩沖時觸發。動畫事件
animationend 該事件在 CSS 動畫結束播放時觸發
animationiteration 該事件在 CSS 動畫重復播放時觸發
animationstart 該事件在 CSS 動畫開始播放時觸發過渡事件
transitionend 該事件在 CSS 完成過渡后觸發。
其他事件
message 該事件通過或者從對象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息時觸發
online 該事件在瀏覽器開始在線工作時觸發。
offline 該事件在瀏覽器開始離線工作時觸發。
popstate 該事件在窗口的瀏覽歷史(history 對象)發生改變時觸發。 event occurs when the window’s history changes
show 該事件當元素在上下文菜單顯示時觸發
storage 該事件在 Web Storage(HTML 5 Web 存儲)更新時觸發
toggle 該事件在用戶打開或關閉 元素時觸發
wheel 該事件在鼠標滾輪在元素上下滾動時觸發
總結來說,window.addEventListener() 是一種非常強大的事件監聽函數,通常用于添加多個事件監聽器和穩定性。
與 onclick 屬性相比,在添加多個事件監聽器時,window.addEventListener() 更加強大和靈活。window.addEventListener() 沒有額外的依賴,因此可以更快,更可靠地添加事件監聽器。
?