Vue.js 学习笔记六：事件监听

目录

事件监听

监听事件

事件修饰符

按键修饰符

系统修饰符

---

事件监听

监听事件

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

v-on 基本使用见 Vue 基本使用 - 常用模板语法 - 指令操作。

当通过 methods 中定义方法，以供 @click 调用时，需要注意参数问题：

情况一：如果该方法不需要额外参数，那么方法后的 () 可以不添加。

注意：如果方法本身中没有一个参数，那么会默认将原生事件 event 参数传递进去。

情况二：如果需要同时传入某个参数，同时需要 event时，可以通过 $event 传入事件。

		<div id="app">
			<!-- <button @click="count++">点击了{{ count }}次</button> -->
			 <button @click="clickAdd">点击了 {{ count }} 次</button>
			 <button @click="clickAddCount(10, $event)">累加了 {{ add }} 次</button> 
			
		</div>
		<script type="text/javascript">
			const app =new Vue({
				el:'#app',
				data:{
					count:0,
					add:0
				},
				
				methods: {
					clickAdd(event) {
						console.log(event)
						this.count++
					},
					clickAddCount(count, event) {
						console.log(event)
						this.add += count
					}
				}
			})
		</script>

 

事件修饰符

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

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

• .stop 调用 event.stopPropagation()

• .prevent 调用 event.preventDefault()

• .capture

• .self

• .once

• .passive

			<!-- 阻止单击事件继续传播 -->
			<a @click.stop="doThis">doThis</a>
			
			<!-- 提交事件不再重载页面 -->
			<form @submit.prevent="onSubmit"></form>
			
			<!-- 修饰符可以串联 -->
			<a @click.stop.prevent="doThat">doThat</a>
			
			<!-- 只有修饰符 -->
			<form @submit.prevent></form>
			
			<!-- 添加事件监听器时使用事件捕获模式 -->
			<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
			<div @click.capture="doThis">...</div>
			
			<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
			<!-- 即事件不是从内部元素触发的 -->
			<div @click.self="doThat">...</div>

            <!-- 点击事件将只会触发一次 -->
            <a @click.once="doThis"></a>

            <!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
            <!-- 而不会等待 onScroll 完成  -->
            <!-- 这其中包含 event.preventDefault() 的情况 -->
            <div @scroll.passive="onScroll">...</div>

 

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

 

按键修饰符

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

<!-- 只有在 key 是 Enter 时调用 vm.submit() -->
<input @keyup.enter="submit">

按键码

keyCode 的事件用法已经被废弃了并可能不会被最新的浏览器支持。

使用 keyCode attribute 也是允许的：

<!-- 只有在 keyCode 是 13 (Enter) 时调用 vm.submit() -->
<input @keyup.13="submit">

为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：

• .enter

• .tab

• .delete (捕获“删除”和“退格”键)

• .esc

• .space

• .up

• .down

• .left

• .right

有一些按键 (.esc 以及所有的方向键) 在 IE9 中有不同的 key 值, 如果你想支持 IE9，这些内置的别名应该是首选。

 

系统修饰符

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

• .ctrl

• .alt

• .shift

• .meta

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

例如：

<!-- Alt + C -->
<input @keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

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