12 監聽鍵盤和鼠標事件 · JavaBeginnersTutorial 中文系列教程

# 12 監聽鍵盤和鼠標事件 > 原文： [https://javabeginnerstutorial.com/vue-js/12-listening-to-keyboard-and-mouse-events/](https://javabeginnerstutorial.com/vue-js/12-listening-to-keyboard-and-mouse-events/) 準備好使用 Vue 監聽鍵盤上的某些鍵代碼和某些鼠標按鈕了嗎？那我們深入吧！如果尚未閱讀，請確保閱讀“[監聽 DOM 事件和事件修飾符](https://javabeginnerstutorial.com/vue-js/11-listening-to-dom-events-and-event-modifiers/)”。因為這更多地是我們已經看到的內容的延續。 ### 起始代碼 **`Index.html`** ```js <!DOCTYPE html> <html> <head> <title>Hello Vue!</title>  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h2>Welcome</h2> <button>Greet</button> </div>  <script src="index.js"></script> </body> </html> ``` **`Index.js`** ```js new Vue({ el: "#app", data: { }, // define all custom methods within the 'methods' object methods: { greet() { alert("Hi"); } } }); ``` ## 監聽鍵盤事件在開發人員世界中，即使用戶沒有明確單擊頁面上提供的 HTML 按鈕來處理這種情況，我們也會經常聽`Enter`鍵以確保執行相應的操作。在使用 Vue 監聽鍵事件時，我們可以使用通常的`v-on`指令來提及所需的鍵修飾符，如下所示： **`Index.html`（代碼段）** ```js  <button v-on:keyup.13="greet">greet</button> ``` 每當用戶釋放按鍵或按鍵上升時，就會觸發`keyup`事件。在這種情況下，我們要監聽`Enter`鍵，而不僅僅是其他鍵。因此，讓我們通過在`keyup`事件之后添加一個點來提及其鍵碼為`13`。想知道我怎么知道那個關鍵代碼？常用的，通常會放在我們的頭上。如果不是，請嘗試 [https://keycode.info/](https://keycode.info/) 獲取鍵盤上任何鍵的鍵碼。太酷了！但是，記住密碼還是一直找 Google 麻煩嗎？不用擔心，就像`.once`，`.prevent`，`.self`等事件修飾符一樣，Vue 為我們提供了用于大多數常用鍵的**鍵修飾符**。清單是這樣的 * `.enter` * `.tab` * `.delete`（同時捕獲“刪除”和“退格”鍵） * `.esc` * `.space` * `.up` * `.down` * `.left` * `.right` 現在，您可以安全地用鍵修飾符`.enter`替換鍵碼`13`，它將像超級按鈕一樣工作。專注于按鈕并單擊鍵盤上的`Enter`，將顯示一條警告消息，顯示為`Hi`。 **注意**：按鍵修飾符僅適用于與鍵盤相關的事件，例如`keyup`。這里沒有火箭科學或量子物理學的東西！* ？ ## 自定義鍵修飾符別名除了 Vue 附帶的關鍵修飾符之外，您還可以繼續進行自己的設置，為您選擇的任何關鍵代碼設置自定義別名。這是通過全局`config.keyCodes`對象完成的。將以下行添加到“`index.js`”文件中以啟用“`v-on:keyup.a`”， ```js Vue.config.keyCodes.a = 65; ``` **`Index.html`（代碼段）** ```js <button v-on:keyup.a="greet">greet</button> ``` 在此，釋放鍵“`a`”時，將觸發鍵代碼為`65`的`keyup`事件，并調用方法“`greet()`”。 Cakewalk！ ## 更多關于鼠標事件的示例！在我們的[上一篇文章](https://javabeginnerstutorial.com/vue-js/11-listening-to-dom-events-and-event-modifiers/)中，我們看到了最著名的鼠標事件*點擊事件*。現在讓我們再看看`mouseover`。假設，將鼠標指針懸停在“`Hover over me!`”按鈕上時，應顯示“`developer`”文本。在 Vue 實例的數據對象中添加“`role`”，并定義一個名為“`showRole`”的方法，以將此角色屬性更新為`String`和`developer`。觸發`mouseover`事件時調用此方法。 **`Index.js`** ```js new Vue({ el: "#app", data: { role: "" }, // define all custom methods within the 'methods' object methods: { showRole() { // 'this' keyword refers to the current Vue instance this.role = "developer"; } } }); ``` **`Index.html`（代碼段）** ```js <button v-on:mouseover="showRole">Hover over me!</button> {{ role }} ``` ![mouseover event](https://img.kancloud.cn/33/af/33afaa867ea189f906c9db76a55783d8_450x255.png) 我們還沒有完成！ ## 使用事件對象還記得 JavaScript 世界中的[本機事件對象](https://www.w3schools.com/jsref/obj_event.asp)嗎？觸發事件時，將創建`Event`對象，并將其自動傳遞給使用`v-on`指令調用的任何方法。再次感謝 Vue！讓我們看一些示例來了解這一點。 `Event`對象具有“`target`”方法，該方法返回觸發事件的元素，并與`element.tagName`屬性一起使用返回元素的 HTML 標記名稱。 **`Index.html`（代碼段）** ```html <div>  <button v-on:mouseover="showRole">Hover over me!</button> {{ role }} <p>{{ "Tag Name:" + tagName }}</p> </div> ``` **`Index.js`** ```jsscript new Vue({ el: "#app", data: { role: "", tagName: "" }, // define all custom methods within the 'methods' object methods: { showRole() { // 'this' keyword refers to the current Vue instance this.role = "developer"; this.tagName = event.target.tagName; } } }); ``` 使用`event.target`將返回“`[object HTMLButtonElement]`”，而`event.target.tagName`將返回“`BUTTON`”。 ![Event object](https://img.kancloud.cn/4a/89/4a89c7f7e37dd5cf416c5a779dd17faa_402x255.png) ## 使用事件對象傳遞參數到目前為止，我們肯定知道兩件事， 1. 將創建`Event`對象，并將其自動傳遞給觸發事件時正在調用的方法。 2. 只需在方法名稱后面的括號內指定參數，即可將參數傳遞給這些方法非常容易。如果我們想使用此自動創建的`Event`對象將自己的參數傳遞，該怎么辦？我們也可以這樣做嗎？答案是肯定的！絕對沒錯！！這里要記住的重點是**命名**。 Vue 將原始 DOM 事件存儲在名為“`$event`”的變量中。注意不要覆蓋或拼寫錯誤，因為它是 Vue.js 使用的受保護名稱，以了解這不是自定義參數，而是`Event`對象本身。讓我們對代碼進行這些更改。 **`Index.html`（代碼段）** ```html <button v-on:mouseover="showRole('developer', $event)">Hover over me!</button> {{ role }} <p>{{ "Tag Name:" + tagName }}</p> ``` **`Index.js`（代碼段）** ```jsscript showRole(customRole, event) { // 'this' keyword refers to the current Vue instance this.role = customRole; this.tagName = event.target.tagName; } ``` 在總結之前，這里是供您欣賞的完整代碼！ **`Index.html`** ```html <!DOCTYPE html> <html> <head> <title>Hello Vue!</title>  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h2>Welcome</h2>  <button v-on:keyup.enter="greet">greet</button> <hr/> <div>  <button v-on:mouseover="showRole('developer', $event)">Hover over me!</button> {{ role }} <p>{{ "Tag Name:" + tagName }}</p> </div> </div>  <script src="index.js"></script> </body> </html> ``` **`Index.js`** ```jsscript new Vue({ el: "#app", data: { role: "", tagName: "" }, // define all custom methods within the 'methods' object methods: { greet() { alert("Hi"); }, showRole(customRole, event) { // 'this' keyword refers to the current Vue instance this.role = customRole; this.tagName = event.target.tagName; } } }); ``` 因此，我們現在可以將自定義參數與帶有`$event`變量的自動創建的`Event`對象一起傳遞。上面討論的所有代碼以及注釋都可以在 [GitHub 倉庫](https://github.com/JBTAdmin/vuejs)中找到。這使我們到了本主題的結尾。祝您有美好的一天！