# 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`**

```java
<!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`**

```java
new Vue({
  el: "#app",
  data: {
  },
  // define all custom methods within the 'methods' object
  methods: {
    greet() {
      alert("Hi");
    }
  }
});
```

## 聆听键盘事件

在开发人员世界中，即使用户没有明确单击页面上提供的 HTML 按钮来处理这种情况，我们也会经常听`Enter`键以确保执行相应的操作。 在使用 Vue 监听键事件时，我们可以使用通常的`v-on`指令来提及所需的键修饰符，如下所示：

**`Index.html`（代码段）**

```java
 <!-- 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 为我们提供了用于大多数常用键的**键修饰符**。 清单是这样的

*   。输入
*   。标签
*   .delete（同时捕获“删除”和“退格”键）
*   。退出
*   。空间
*   .up
*   。下
*   。剩下
*   。对

现在，您可以安全地用键修饰符`.enter`替换键码`13`，它将像超级按钮一样工作。 专注于按钮并单击键盘上的`Enter`，将显示一条警告消息，显示为`Hi`。

**注意**：按键修饰符仅适用于与键盘相关的事件，例如`keyup`。 这里没有火箭科学或量子物理学的东西！* ？

## 自定义键修饰符别名

除了 Vue 附带的关键修饰符之外，您还可以继续进行自己的设置，为您选择的任何关键代码设置自定义别名。 这是通过全局`config.keyCodes`对象完成的。

将以下行添加到“`index.js`”文件中以启用“`v-on:keyup.a`”，

```java
Vue.config.keyCodes.a = 65;
```

**`Index.html`（代码段）**

```java
<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`**

```java
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`（代码段）**

```java
<button v-on:mouseover="showRole">Hover over me!</button>
 {{ role }}
```

![mouseover event](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20450%20255'%3E%3C/svg%3E)

<noscript><img alt="mouseover event" class="alignnone size-full wp-image-14144" height="255" src="img/a1c490148c18e07a6f32b328ddfde462.png" width="450"/><p>我们还没有完成！</p><h2>使用事件对象</h2><p>还记得 JavaScript 世界中的<a href="https://www.w3schools.com/jsref/obj_event.asp">本机事件对象</a>吗？ 触发事件时，将创建 Event 对象，并将其自动传递给使用<code>v-on</code>指令调用的任何方法。 再次感谢 Vue！ 让我们看一些例子来了解这一点。</p><p>Event 对象具有“ <code>target</code>”方法，该方法返回触发事件的元素，并与<code>element.tagName</code>属性一起使用返回元素的 HTML 标记名称。</p><p><strong>Index.html (code snippet)</strong></p><pre><code class="language-html">&lt;div&gt; &lt;!-- Listening to mouse events --&gt; &lt;button v-on:mouseover="showRole"&gt;Hover over me!&lt;/button&gt; {{ role }} &lt;p&gt;{{ "Tag Name:" + tagName }}&lt;/p&gt; &lt;/div&gt;</code></pre><p><strong>Index.js</strong></p><pre><code class="language-javascript">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; } } });</code></pre><p>使用<code>event.target</code>将返回“ <code>[object HTMLButtonElement]</code>”，而<code>event.target.tagName</code>将返回“ <code>BUTTON</code>”。</p><p><img alt="Event object" class="alignnone size-full wp-image-14143" data-lazy-sizes="(max-width: 402px) 100vw, 402px" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/12/5_p2-event-obj.jpg" data-lazy-srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/12/5_p2-event-obj.jpg 402w, https://javabeginnerstutorial.com/wp-content/uploads/2018/12/5_p2-event-obj-300x190.jpg 300w" height="255" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20402%20255'%3E%3C/svg%3E" width="402"/></p><noscript><img alt="Event object" class="alignnone size-full wp-image-14143" height="255" sizes="(max-width: 402px) 100vw, 402px" src="img/f8145617a1b29741272a1a997f640584.png" srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/12/5_p2-event-obj.jpg 402w, https://javabeginnerstutorial.com/wp-content/uploads/2018/12/5_p2-event-obj-300x190.jpg 300w" width="402"/><h2>与 Event 对象一起传递参数</h2><p>到目前为止，我们肯定知道两件事，</p><ol><li>将创建<code>Event</code>对象，并将其自动传递给触发事件时正在调用的方法。</li><li>只需在方法名称后面的括号内指定参数，即可将参数传递给这些方法非常容易。</li></ol><p>如果我们想使用此自动创建的<code>Event</code>对象将自己的参数<em> <strong>沿</strong> </em>传递，该怎么办？ 我们也可以这样做吗？</p><p>答案是肯定的！ 绝对没错！！</p><p>这里要记住的重点是<em> <strong>的命名</strong> </em>。 Vue 将原始 DOM 事件存储在名为“ <code>$event</code>”的变量中。 注意不要覆盖或拼写错误，因为它是 Vue.js 使用的受保护名称，以了解这不是自定义参数，而是<code>Event</code>对象本身。</p><p>让我们对代码进行这些更改。</p><p><strong>Index.html (code snippet)</strong></p><pre><code class="language-html">&lt;button v-on:mouseover="showRole('developer', $event)"&gt;Hover over me!&lt;/button&gt; {{ role }} &lt;p&gt;{{ "Tag Name:" + tagName }}&lt;/p&gt;</code></pre><p><strong> Index.js（代码段）</strong></p><pre><code class="language-javascript">showRole(customRole, event) { // 'this' keyword refers to the current Vue instance this.role = customRole; this.tagName = event.target.tagName; }</code></pre><p>在总结之前，这里是供您欣赏的完整代码！</p><p><strong>Index.html</strong></p><pre><code class="language-html">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Hello Vue!&lt;/title&gt; &lt;!-- including Vue with development version CDN --&gt; &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="app"&gt; &lt;h2&gt;Welcome&lt;/h2&gt; &lt;!-- Using key modifiers with keyboard events --&gt; &lt;button v-on:keyup.enter="greet"&gt;greet&lt;/button&gt; &lt;hr/&gt; &lt;div&gt; &lt;!-- Passing arguments along with original DOM event --&gt; &lt;button v-on:mouseover="showRole('developer', $event)"&gt;Hover over me!&lt;/button&gt; {{ role }} &lt;p&gt;{{ "Tag Name:" + tagName }}&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- including index.js file --&gt; &lt;script src="index.js"&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</code></pre><p><strong>Index.js</strong></p><pre><code class="language-javascript">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; } } });</code></pre><p>因此，我们现在可以将自定义参数与带有<code>$event</code>变量的自动创建的<code>Event</code>对象一起传递。 上面讨论的所有代码以及注释都可以在<a href="https://github.com/JBTAdmin/vuejs"> GitHub 存储库</a>中找到。</p><p>这使我们到了本主题的结尾。 祝您有美好的一天！</p><div class="sticky-nav" style="font-size: 15px;"><div class="sticky-nav-image"></div><div class="sticky-nav-holder"><div class="sticky-nav_item"><h6 class="heading-sm">下一篇文章</h6></div><h5 class="sticky-nav_heading " style="font-size: 15px;"><a href="https://javabeginnerstutorial.com/vue-js/13-shorthands-for-v-bind-and-v-on/" title="13\. Let’s use shorthands"> 13.让我们使用速记</a></h5></div></div> </body> </html></noscript>