# 11.侦听 DOM 事件和事件修饰符

> 原文： [https://javabeginnerstutorial.com/vue-js/11-listening-to-dom-events-and-event-modifiers/](https://javabeginnerstutorial.com/vue-js/11-listening-to-dom-events-and-event-modifiers/)

我们在事件方面一直处于停滞状态。 现在，让我们学习如何收听 DOM 事件，即`click`事件。 看一下起始代码，

#### 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>Say Hello</button>
      <p> {{ message }} </p>
    </div>
    <!-- including index.js file -->
    <script src="index.js"></script>
  </body>
</html>
```

#### Index.js

```java
var app = new Vue({
  el: "#app",
  data: {
    message: "Hi"
  }
});
```

地球上最著名的按钮事件是`click`事件。 假设我们要在单击“说你好”按钮时将消息“嗨”更改为“你好”。 知道我们如何通过 Vue 实现这一目标吗？

亲们，人民，Vue 为此又有另一个指令，v-on！ 我们始终可以使用 v-on 监听 DOM 事件，例如，

*   鼠标事件 – 单击，dblclick，mousemove，mouseover 等。
*   键盘事件-按键，按键，按键等。
*   表单事件 – 提交，聚焦，模糊等
*   还有很多

## 监听点击事件

因此，我们现在的任务是监听按钮“ Say Hello”上发生点击事件时，将消息文本从“ Hi”更改为“ Hello”。 一件事很清楚。 我们必须将`v-on`指令添加到将要监听 click 事件的 button 元素中。

```java
<button v-on:click="message='Hello'">Say Hello</button>
```

剖析语法，

*   `v-on` – Vue 知道我们正在使用此指令来监听事件
*   `click` – 指定在冒号之后我们正在监听的事件的类型
*   `“”` – 在等号后，指定触发事件时我们要执行的方法名称或 JavaScript 代码。

我们正在从 Vue 实例的数据对象访问`message`属性，并将其设置为“ Hello”。 输出如下，

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

<noscript><img alt="click event" class="alignnone size-full wp-image-14127" height="267" src="img/8d4cd9791d942ea8222e5da810bcf76c.png" width="371"/><p>凉！ 但是在实际的应用中，我们将要做的不仅仅是改变属性的文本。</p><p><strong> <em>令人费解的问题：</em> </strong>如何在<code>v-on</code>指令的双引号中放入复杂的 JavaScript 代码？</p><h3>使用方法</h3><p><span class="ezoic-adpicker-ad" id="ezoic-pub-ad-placeholder-124"> </span> <span class="ezoic-ad box-4 adtester-container adtester-container-124" data-ez-name="javabeginnerstutorial_com-box-4" style="display:block !important;float:none;margin-bottom:2px !important;margin-left:0px !important;margin-right:0px !important;margin-top:2px !important;min-height:110px;min-width:728px;text-align:center !important;"> <span class="ezoic-ad" ezah="90" ezaw="728" id="div-gpt-ad-javabeginnerstutorial_com-box-4-0" style="position:relative;z-index:0;display:inline-block;min-height:90px;min-width:728px;"> </span> </span>上面提到的大脑拖曳问题的答案是使用方法。 就像<code>“data”</code>对象一样，我们的 Vue 实例有一个可选的<code>“methods”</code>对象，我们可以在其中定义所有方法。</p><p>现在，在<code>v-on</code>的双引号中，只需提及方法的名称，然后<strong>传递所需的参数</strong>（如果有）。 然后，在 Vue 实例的<code>“methods”</code>对象中定义方法，该方法将在每次<code>click</code>事件发生时触发。</p><h4>Index.html（代码段）</h4><pre><code class="language-html">&lt;button v-on:click="greet('howdy')"&gt;Say Hello&lt;/button&gt;</code></pre><h4>Index.js</h4><pre><code class="language-javascript">var app = new Vue({ el: "#app", data: { message: "Hi" }, // define all the methods within the 'methods' object methods: { greet(greeting) { // 'this' keyword refers to the current Vue instance this.message = greeting; } } });</code></pre><p>您注意到<code>this</code>关键字的用法了吗？ 为了从 HTML 引用<code>data</code>对象的属性，我们可以直接使用它们，因为我们使用<code>‘el’</code>关键字将特定的 HTML 部分与 Vue 实例挂钩。 但是，在<code>methods</code>内部，我们必须使用<code>‘this’</code>关键字指向 Vue 实例，然后访问<code>data</code>对象的属性。</p><p><img alt="click event with method" class="alignnone size-full wp-image-14125" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/2_click-with-method.jpg" height="227" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20277%20227'%3E%3C/svg%3E" width="277"/></p><noscript><img alt="click event with method" class="alignnone size-full wp-image-14125" height="227" src="img/4226a5eb01a26b79a17a0465adc3b6af.png" width="277"/><p>单击该按钮，“说声你好”触发了<code>greet(‘howdy’)</code>方法，并且该方法中的代码被执行，从而向网页呈现“ Howdy”。</p><h2>事件修饰符</h2><p>假设我们有一个名为“ <strong>加 1 </strong>”的按钮和一个初始值为<code>zero</code>的计数器。 每次单击该按钮时，都会在现有的<code>counter</code>值上加 1 并将其打印到屏幕上。</p><p>现在让我们将想象力带入现实。 只需将<code>v-on</code>指令与<code>click</code>用作参数，即可触发将<code>counter</code>值加 1 的方法。</p><h4>Index.html (snippet)</h4><pre><code class="language-html">&lt;button v-on:click="addOne"&gt;Add 1&lt;/button&gt; &lt;p&gt; {{ counter }} &lt;/p&gt;</code></pre><h4>Index.js（代码段）</h4><pre><code class="language-javascript">methods: { addOne: function() { this.counter += 1; } }</code></pre><p><strong> <em>脑筋急转弯问题：</em> </strong> <em>如果我们只想先在<strong>首先在</strong> <code>click</code>上触发此方法，然后再不触发该方法怎么办？ </em></p><p>该问题的答案是 – <strong>事件修饰符</strong>！ 这些使我们能够<strong>修改事件</strong>的行为（正如其名称所暗示的）。</p><p><strong>用法：</strong>在事件名称（在本例中为<code>click</code>）之后，添加一个点并指定要使用的修饰符的名称。</p><pre><code class="language-html">&lt;button v-on:click.once="addOne"&gt;Add 1&lt;/button&gt;</code></pre><p>使用事件修饰符<code>.once</code>，<code>click</code>事件将仅触发一次。 这意味着，无论单击按钮多少次，只要将<code>counter</code>的值增加到 1，<code>“addOne”</code>方法将仅被称为<strong>。</strong></p><p><img alt=".once event modifier" class="alignnone size-full wp-image-14126" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/3_modifier-.once_-1.jpg" height="413" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20415%20413'%3E%3C/svg%3E" width="415"/></p><noscript><img alt=".once event modifier" class="alignnone size-full wp-image-14126" height="413" src="img/ecfa020fb75663bf3465034cc7d2100a.png" width="415"/><p>同样，其他可用的事件修饰符是</p><li>。停</li><li>。避免</li><li>。捕获</li><li>。自</li><li>。一旦</li><li>。被动</li><p>最常用的修饰符是<code>.stop</code>和<code>.prevent</code>，它们称为众所周知的<code>event.stopPropagation()</code>和<code>event.preventDefault()</code>方法。 这些是<a href="https://www.w3schools.com/jsref/obj_event.asp">本机事件对象</a>随附的方法。 这里与 Vue 无关。 Vue.js 只是提供了一种简单的方法，借助修饰符来处理此类常见事件详细信息，而不是在 Vue 实例的方法中显式指定这些事件方法（例如<code>event.preventDefault()</code>来取消事件）。</p><h3><strong>两个最常用修改器的快速刷新：</strong></h3><p>根据<code>stopPropagation()</code>事件方法，<code>.stop</code>修饰符将进一步停止事件的传播。</p><p>根据<code>preventDefault()</code>方法，<code>.prevent</code>修饰符将防止发生默认操作。 <code>.prevent</code>的最佳示例是将其与<code>Submit</code>按钮一起使用，以便触发提交事件时，它不会重新加载页面。</p><h3><strong>链接修饰符</strong></h3><p><em>警告：一开始可能会有些弯腰！ </em></p><p>Vue 让我们像这样，将这些修饰符一个接一个地链接，</p><pre><code class="language-html">v-on:click.self.prevent</code></pre><p>链接的<strong>顺序非常重要。 因为与每个修饰符相关的代码是按相同顺序生成的。</strong></p><p>例如，</p><pre><code class="language-html">&lt;a href="https://vuejs.org/" v-on:click.self.prevent target="_blank"&gt;Open Vue &lt;p&gt;Click me now&lt;/p&gt; &lt;/a&gt;</code></pre><p>使用<code>v-on:click.self.prevent</code>仅会阻止单击<code>&lt;a&gt;</code>元素本身，而不是单击其<code>child</code>元素。 好吧，我听到你说“请用英语”！ 换句话说，这意味着</p><li>单击<code>&lt;a&gt;</code>标签的<strong>“打开 Vue” </strong>将阻止打开<code>vuejs.org</code>页面</li><li>单击<strong>标签上的“立即单击我” </strong>，将在新标签中打开<code>vuejs.org</code>官方页面</li><p>相反，如果我们将链接修饰符的顺序更改为<code>v-on:click.prevent.self</code>，则将防止发生所有单击事件。</p><pre><code class="language-html">&lt;a href="https://vuejs.org/" v-on:click.prevent.self target="_blank"&gt;Open Vue &lt;p&gt;Click me now&lt;/p&gt; &lt;/a&gt;</code></pre><p>单击<code>&lt;a&gt;</code>的<strong>“打开 Vue” </strong>和<code>&lt;p&gt;</code>的<strong>“立即单击我” </strong>都不会打开<code>vuejs.org</code>（换句话说，它无法打开 ）。</p><p>现在，让我们看一下到目前为止处理的完整代码，</p><p>index.html</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;!-- Listening to click event with v-on directive --&gt; &lt;button v-on:click="greet('howdy')"&gt;Say Hello&lt;/button&gt; &lt;p&gt; {{ message }} &lt;/p&gt; &lt;h2&gt;Event Modifiers&lt;/h2&gt; &lt;!-- Using .once to modify click event --&gt; &lt;button v-on:click.once="addOne"&gt;Add 1&lt;/button&gt; &lt;p&gt; {{ counter }} &lt;/p&gt; &lt;!-- chaining event modifiers --&gt; &lt;a href="https://vuejs.org/" v-on:click.prevent.self target="_blank"&gt;Open Vue &lt;p&gt;Click me now&lt;/p&gt; &lt;/a&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>index.js</p><pre><code class="language-javascript">var app = new Vue({ el: "#app", data: { message: "Hi", counter: 0 }, // define all the methods within the 'methods' object methods: { greet(greeting) { // 'this' keyword refers to the current Vue instance this.message = greeting; }, // another way to define methods before es6 addOne: function() { this.counter += 1; } } });</code></pre><p>我知道今天有很多事情要消化。 上面讨论的所有代码以及不言自明的注释在<a href="https://github.com/JBTAdmin/vuejs"> GitHub 存储库</a>中可用。 慢慢来，我很快就会回来讨论键盘和其他鼠标 DOM 事件。</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/12-listening-to-keyboard-and-mouse-events/" title="12\. Listening to keyboard and mouse events"> 12.侦听键盘和鼠标事件</a></h5></div></div> </body> </html></noscript>