JavaScript:監聽事件

?該方法用于向瀏覽器窗口注冊事件監聽器,當指定的事件(如單擊、按鍵按下)被觸發時,瀏覽器會自動調用指定的函數(回調函數)。

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() 沒有額外的依賴,因此可以更快,更可靠地添加事件監聽器。

?

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/163455.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/163455.shtml
英文地址,請注明出處:http://en.pswp.cn/news/163455.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

洛谷題單--線性表

P3156 【深基15.例1】詢問學號 鏈接 : 【深基15.例1】詢問學號 - 洛谷 直接輸入&#xff0c;然后輸出a[i]即可; 代碼 : #include<iostream> #include<cstring> #include<algorithm> #include<vector> using namespace std; int main(){int n, q …

請手寫一個發布-訂閱的模式

發布-訂閱模式也是經典的設計模式之一&#xff0c;它在前端很多地方都有應用&#xff0c;比如javascript事件池&#xff0c;Vue的$on、$off&#xff0c;nodejs的events模塊和socket通信等等都有應用&#xff0c;也是前端面試比較火熱的考點之一&#xff0c;接下來給大家詳細介紹…

cefsharp119.4.30(cef119.4.3,Chromium119.0.6045.159)版本升級體驗支持H264及其他多個H264版本

Cefsharp119.4.30,cef119.4.3,Chromium119.0.6045.159 此更新包括一個高優先級安全更新 This update includes a high priority security update. 說明:此版本119.4.3支持H264視頻播放(需要聯系我),其他版本。.NETFramework 4.6.2 NuGet Gallery | CefSharp.WinForms 119.…

運動規劃Motion-Planning隨筆

online verification技術 實時安全校驗技術&#xff1a;留一手 首先計算能否通過剎車這種方式得到一條安全軌跡&#xff0c;&#xff08;讓速不讓道&#xff09;&#xff0c;當剎車有可能碰撞到行人或其他車輛時&#xff0c;則判斷變道是否會產生碰撞。如果能變道&#xff0…

深度學習之七(深度信念網絡和受限玻爾茲曼機器)

概念 深度信念網絡(Deep Belief Networks,DBN)和受限玻爾茲曼機器(Restricted Boltzmann Machines,RBMs)都是無監督學習的模型,通常用于特征學習、降維和生成數據。 受限玻爾茲曼機器(RBM): 結構: RBM 是一個兩層神經網絡,包括一個可見層和一個隱藏層。這兩層之間…

qt按照不同編碼格式讀取文字(UTF-16LE,UTF-8,UTF-8BOM,UTF-16BE)

enum class EncodingFormat : int {ANSI 0,//GBKUTF16LE,UTF16BE,UTF8,UTF8BOM, }; EncodingFormat VideoPlayer::FileCharacterEncoding(const QString &fileName) {//假定默認編碼utf8EncodingFormat code EncodingFormat::UTF8;QFile file(fileName);if (file.open(QI…

「 系統設計 」 為什么要做架構分層?

「 系統設計 」 為什么要做架構分層&#xff1f; 參考&鳴謝 3.設計模式之分層思維&#xff1a;為什么要做代碼分層架構&#xff1f; 從零開始學架構&#xff08;八&#xff09;分層架構和設計模式 架構模式之分層架構總結 文章目錄 「 系統設計 」 為什么要做架構分層&…

解決 IDEA下VUE項目 @符號無法識別的問題

根目錄新建jsconfig.json {"compilerOptions": {"baseUrl": "./","paths": {"/*": ["src/*"]}},"exclude": ["node_modules","dist"] }

IT支持團隊的績效指標和最佳實踐

一名員工在遠程時因筆記本問題尋求IT支持&#xff0c;盡管他們多次嘗試排除故障&#xff0c;但由于缺乏專業知識&#xff0c;最終還是無法訪問工作所需的應用程序。這時&#xff0c;他們需要一名專業的 IT 技術人員來指導他們&#xff0c;但他們只能等待有人注意到并回應他們的…

海報設計必備:揭秘5款炙手可熱的設計工具

1.即時設計&#xff1a;能實現在線協作的海報設計軟件 即時設計作為 2020 年上線的國產設計工具&#xff0c;目前已經有了超百萬的注冊用戶&#xff0c;獲得了廣大設計師的一致好評。與其他傳統海報設計軟件相比&#xff0c;即時設計具有這幾個優點&#xff1a;一是所有功能都…

Chrome 訪問不了項目?10080端口 ERR_UNSAFE_PORT:問題原因 / 解決方案

文章目錄 被禁用端口列表解決方法方法一、更換端口 / 使用代理 / 使用域名方法二、對瀏覽器下手WindowsMac 最近有客戶反饋&#xff0c;在chrome瀏覽器中訪問不了項目&#xff0c;其他瀏覽器都是正常的。 &#xff1f;奇了怪了&#xff0c;難道客戶對chrome做了什么操作&#x…

Docker | Docker入門安裝

?作者簡介&#xff1a;大家好&#xff0c;我是Leo&#xff0c;熱愛Java后端開發者&#xff0c;一個想要與大家共同進步的男人&#x1f609;&#x1f609; &#x1f34e;個人主頁&#xff1a;Leo的博客 &#x1f49e;當前專欄&#xff1a;Docker系列 ?特色專欄&#xff1a; My…

探索WebStorm 2023 Mac/win:最強大的JavaScript開發工具

在當今的軟件開發領域&#xff0c;JavaScript已經成為了一種不可或缺的編程語言。而在眾多的JavaScript開發工具中&#xff0c;WebStorm一直以其強大的功能和友好的用戶界面脫穎而出。現在&#xff0c;我們迎來了全新的WebStorm 2023版本&#xff0c;它將帶給開發者們更加出色的…

有機紡織品OCS認證

【有機紡織品OCS認證】 有機產品是指按照這種方式生產和加工的產品。產品符合國際或者國家有機產品要求標準&#xff0c;并通過國家認證機構認證的一切農副產品及其加工品&#xff0c;包括糧食、蔬菜、水果、奶制品、禽畜產品、天然纖維等。 有機紡織品認證是指在使用經過國際或…

華中科技大學李松課題組,利用機器學習預測多孔材料水吸附等溫線

多孔材料的水吸附等溫線是一個非常重要的參數&#xff0c;但這一參數的獲得并不容易。這是因為多孔材料種類過多、結構多元&#xff0c;通過實驗和計算的方式獲得水吸附等溫線數據成本過高&#xff0c;耗時過長。 華中科技大學的李松課題組&#xff0c;建立了一個兩步機器學習模…

LeetCode [簡單] 283. 移動零

給定一個數組 nums&#xff0c;編寫一個函數將所有 0 移動到數組的末尾&#xff0c;同時保持非零元素的相對順序。 請注意 &#xff0c;必須在不復制數組的情況下原地對數組進行操作。 283. 移動零 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 快慢指針&…

可以在uni-app使用的類vconsole.js插件

興致勃勃在uni-app項目引入調試工具vconsole.js結果真機調試頁面空白 怎么辦?! 別著急 paradox老師有方法 替代插件下載地址&#xff1a;直接下載插件并引入HbuilderXuni_modules插件 - 類Vconsole APP端調試工具 - HF調試器 - DCloud 插件市場 下載完成在main.js中引入&…

鴻蒙開發環境搭建-deveco-studio 開發工具安裝問題()

從華為官網下載工具deveco-studio, 下載地址 HUAWEI DevEco Studio和SDK下載和升級 | HarmonyOS開發者 這是下載后的工具 1、一步步安裝步驟 報錯了&#xff0c;一般安裝都會報這個錯誤 看似問題不小&#xff0c;其實&#xff0c; 繼續下步&#xff0c;就正常了&#xff0c…

棧回溯--在棧里挑出返回地址

GNU Arm Embedded Toolchain project files : GNU Arm Embedded Toolchain arm-none-eabi-addr2line -e F103_Moduel.axf -a -f 08000350 08001d94 0800260c 匯編中&#xff1a; ;HardFault_Handler ; PROC ; EXPORT HardFault_Handler …

神命令tree的魅力你get到了嗎?

背景 日常工作中&#xff0c;有時候為了明確表達自己的意思&#xff0c;往往需要輸出對應的目錄層級結構&#xff0c;手動一個個輸入往往顯得不那么高級&#xff0c;效率相對較低&#xff0c;這時候擁有可以一鍵輸出目錄結構并且可以快速轉化為文本的工具就比較方便&#xff0…