<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ??碼云GVP開源項目 12k star Uniapp+ElementUI 功能強大 支持多語言、二開方便! 廣告
                # 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> <!-- including Vue with development version CDN --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h2>Welcome</h2> <button>Greet</button> </div> <!-- including index.js file --> <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 <!-- Using key modifiers along with keyboard events --> <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> <!-- Listening to mouse events --> <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> <!-- including Vue with development version CDN --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h2>Welcome</h2> <!-- Using key modifiers with keyboard events --> <button v-on:keyup.enter="greet">greet</button> <hr/> <div> <!-- Passing arguments along with original DOM event --> <button v-on:mouseover="showRole('developer', $event)">Hover over me!</button> {{ role }} <p>{{ "Tag Name:" + tagName }}</p> </div> </div> <!-- including index.js file --> <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)中找到。 這使我們到了本主題的結尾。 祝您有美好的一天!
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看