Vue.js（9）：事件处理

灰太狼 2022-09-14 13:22 205阅读 0赞

# 一、监听事件 #

我们可以使用 `v-on` 指令 (通常缩写为 `@` 符号) 来监听 DOM 事件，并在触发事件时执行一些 JavaScript。用法为 `v-on:click="methodName"` 或使用快捷方式 `@click="methodName"`

<div id="basic-event">
              
    		  <button @click="counter += 1">Add 1</button>
    		  <p>The button above has been clicked {
       { counter }} times.</p>
    		</div>
    		<script>
    			Vue.createApp({
    			  data() {
    			    return {
    			      counter: 0
    			    }
    			  }
    			}).mount('#basic-event')
    		</script>

# 二、事件处理方法 #

然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 `v-on` 指令中是不可行的。因此 `v-on` 还可以接收一个需要调用的方法名称。

<div id="event-with-method">
    		  
    		  <button @click="greet">Greet</button>
    		</div>
    		<script>
    			Vue.createApp({
    			  data() {
    			    return {
    			      name: 'Vue.js'
    			    }
    			  },
    			  methods: {
    			    greet(event) {
    			      // `methods` 内部的 `this` 指向当前活动实例
    			      alert('Hello ' + this.name + '!')
    			      // `event` 是原生 DOM event
    			      if (event) {
    			        alert(event.target.tagName)
    			      }
    			    }
    			  }
    			}).mount('#event-with-method')
    		</script>

# 三、内联处理器中的方法 #

除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法：

<div id="inline-handler">
    			
    		  <button @click="say('hi')">Say hi</button>
    		  <button @click="say('what')">Say what</button>
    		</div>
    		<script>
    			Vue.createApp({
    			  methods: {
    			    say(message) {
    			      alert(message)
    			    }
    			  }
    			}).mount('#inline-handler')
    		</script>

有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 `$event` 把它传入方法：

<form id="inline-handler">
    			<button @click="warn('Form cannot be submitted yet.', $event)">
    			  Submit
    			</button>
    		</form>
    		<script>
    			Vue.createApp({
    			  methods: {
    			    warn(message, event) {
    			      // 现在可以访问到原生事件，阻止表单提交
    			      event.preventDefault()
    			      alert(message)
    			    }
    			  }
    			}).mount('#inline-handler')
    		</script>

# 四、多事件处理器 #

事件处理程序中可以有多个方法，这些方法由逗号运算符分隔：

<button @click="one($event), two($event)">
      Submit
    </button>

// ...
    methods: {
      one(event) {
        // 第一个事件处理器逻辑...
      },
      two(event) {
       // 第二个事件处理器逻辑...
      }
    }

# 五、事件修饰符 #

在事件处理程序中调用 `event.preventDefault()` 或 `event.stopPropagation()` 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 `v-on` 提供了**事件修饰符**。之前提过，修饰符是由点开头的指令后缀来表示的。

*  `.stop`
 *  `.prevent`
 *  `.capture`
 *  `.self`
 *  `.once`
 *  `.passive`

<a @click.stop="doThis"></a>
    
    
    <form @submit.prevent="onSubmit"></form>
    
    
    <a @click.stop.prevent="doThat"></a>
    
    
    <form @submit.prevent></form>
    
    
    
    <div @click.capture="doThis">...</div>
    
    
    
    <div @click.self="doThat">...</div>

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 `v-on:click.prevent.self` 会阻止所有的点击，而 `v-on:click.self.prevent` 只会阻止对元素自身的点击。

<a @click.once="doThis"></a>

不像其它只能对原生的 DOM 事件起作用的修饰符，`.once` 修饰符还能被用到自定义的[组件事件][Link 1]上。如果你还没有阅读关于组件的文档，现在大可不必担心。

Vue 还对应 [addEventListener 中的 passive 选项][addEventListener_ passive]提供了 `.passive` 修饰符。

<div @scroll.passive="onScroll">...</div>

这个 `.passive` 修饰符尤其能够提升移动端的性能。

不要把 `.passive` 和 `.prevent` 一起使用，因为 `.prevent` 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，`.passive` 会告诉浏览器你*不想*阻止事件的默认行为。

# 六、按键修饰符 #

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 `v-on` 或者 `@` 在监听键盘事件时添加按键修饰符：

<input @keyup.enter="submit" />

你可以直接将 [KeyboardEvent.key][] 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。

在上述示例中，处理函数只会在 `$event.key` 等于 `'PageDown'` 时被调用。

## 按键别名 ##

Vue 为最常用的键提供了别名：

*  `.enter`
 *  `.tab`
 *  `.delete` (捕获“删除”和“退格”键)
 *  `.esc`
 *  `.space`
 *  `.up`
 *  `.down`
 *  `.left`
 *  `.right`

# 七、系统修饰键 #

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

*  `.ctrl`
 *  `.alt`
 *  `.shift`
 *  `.meta`

注意：在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。

例如：

<input @keyup.alt.enter="clear" />
    
    
    <div @click.ctrl="doSomething">Do something</div>

请注意修饰键与常规按键不同，在和 `keyup` 事件一起用时，事件触发时修饰键必须处于按下状态。换句话说，只有在按住 `ctrl` 的情况下释放其它按键，才能触发 `keyup.ctrl`。而单单释放 `ctrl` 也不会触发事件。

## `.exact` 修饰符 ##

`   .exact` 修饰符允许你控制由精确的系统修饰符组合触发的事件。

<button @click.ctrl="onClick">A</button>
    
    
    <button @click.ctrl.exact="onCtrlClick">A</button>
    
    
    <button @click.exact="onClick">A</button>

## 鼠标按钮修饰符 ##

*  `.left`
 *  `.right`
 *  `.middle`

这些修饰符会限制处理函数仅响应特定的鼠标按钮。

# 八、为什么在 HTML 中监听事件？ #

你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。但不必担心，因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。实际上，使用 `v-on` 或 `@` 有几个好处：

1.  扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
2.  因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。
3.  当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。

[Link 1]: https://v3.cn.vuejs.org/guide/component-custom-events.html
[addEventListener_ passive]: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Parameters
[KeyboardEvent.key]: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values