如果阅读有疑问的话,欢迎评论或私信!!
文章目录
- 事件处理
- 前言
- 监听事件
- 内联事件处理器
- 方法事件处理器
- 方法与内联事件判断
- 在内联处理器中调用方法
- 在内联事件处理器中访问事件参数
- 修饰符
- 事件修饰符
- 按键修饰符
- 常规按键别名
- 系统按键别名
- 组合按键
- exact 修饰符
- 鼠标按键修饰符
事件处理
前言
我们在模板语法
板块中简单介绍过v-on
指令的使用方法,我们可以通过v-on
绑定一个DOM事件,或者使用@
绑定,对于其中的值(也就是事件处理器),我们可以是一个方法。在该章节中,我们会知道绑定事件的详细介绍。
监听事件
事件处理器的值可以是:
- 内联事件处理器:事件被触发时执行的内联
JavaScript语句
。也就是不同表达式的代码
。 - 方法事件处理器:一个指向组件上定义的方法的
属性名
或是路径
,也就是找包含不同表达式代码的地方在哪里。
内联事件处理器
内联事件处理器通常用于简单场景,例如:
<template><button @click="this.keyTest.unshift({ id: 10, myName: "新的" });">添加</button>
</template><script>data() {var keyTest = [{id: 0,myName: 1,},{id: 1,myName: 2,},{id: 2,myName: 3,},{id: 3,myName: 4,},{id: 4,myName: 5,},];return {keyTest}
}
</script>
方法事件处理器
由于内联事件处理器在面对复杂逻辑时会显得有些冗余,并且不够灵活。所以加入了方法事件处理器,它可以接受一个方法名,用于处理更复杂的事件处理逻辑。例如:
<template><button @click="greet">Test</button>
</template><script>methods: {greet(event) {// `event` 是 DOM 原生事件if (event) {console.log(event);}},}
</script>
在方法事件处理器中,我们可以使用任意变量名
表示一个DOM事件参数,推荐使用event表示,增加可读性。其中event
是DOM原生事件
,并没有被包装,例如可以使用event.target.tagName
来获取当前调用DOM的标签名。
方法与内联事件判断
在对vue模板编译时,编译器会检查v-on
指令中的值。如果是一个属性访问路径
,那么就当作是一个方法事件处理器
处理;如果是JavaScript标识符
或是一个调用方法
,那么就会当作是一个内联事件处理器
处理。
在内联处理器中调用方法
在上面我们讲到对一个函数的调用属于内联处理器,其中的参数也不再是方法事件处理器中所将的DOM原生事件,而是自定义参数:
<template><button @click="say('hello')">Say hello</button><button @click="say('bye')">Say bye</button>
</template><script>methods: {say(message) {alert(message)}}
</script>
在内联事件处理器中访问事件参数
我们目前知道方法事件处理器
中的参数是DOM原生事件
,内联事件处理器
是自定义参数
,那么除了自定义参数,我们还可以向方法中传递$event
变量,表示我们使用DOM原生事件参数,例如:
<template><button @click="greet('123')">Test</button>
</template><script>methods: {greet(customName,$event) {console.log(customName); //123 PointerEvent {isTrusted: true,…}},}
</script>
我们还可以先在内联代码中使用箭头函数将当前原生DOM事件作为参数传入到方法中,例如:
<template><button @click="(event)=>{greet('123',event)}">Test</button>
</template><script>methods: {greet(customName,$event) {console.log(customName); //123 PointerEvent {isTrusted: true,…}},}
</script>
修饰符
Vue为我们提供了许多便捷修饰符,使我们的代码更简洁。提供修饰符的目的是使我们的代码能更注重其中的逻辑性,而不会被一些细节问题打乱。修饰符使用.
后缀使用,和v-on
指令一起使用。
事件修饰符
.stop
阻止元素向上冒泡.prevent
清除DOM默认行为.self
等同于先进行event.target === this
判断,如果是自身才触发,是为了防止冒泡引起问题。.capture
在多层DOM嵌套中,触发内部元素,会引起外部元素的相应事件,而capture可以使当前DOM优先处理。.once
事件最多被触发一次.passive
与prevent相对,可以说是防止清除DOM默认行为
。
按键修饰符
Vue同时为我们提供了按键修饰符,可以使用KeyboardEvent
键盘事件加.
后缀使用。例如:
<template><input type="text" @keyup.a="console.log('a')">
</template>
在输入时,如果发生a键松开时,触发监听事件。
在修饰符命名中,我们使用的是-
分隔符,而不是驼峰命名。例如:
<template><input type="text" @keyup.page-down="console.log('pageDown')">
</template>
常规按键别名
.enter
回车键.tab
换行键.delete
(捕获“Delete”和“Backspace”两个按键).esc
退出键.space
空格.up
↑键.down
↓键.left
←键.right
→键
系统按键别名
.ctrl
.alt
.shift
.meta
在 Mac 键盘上,meta 是 Command 键 (⌘)。在 Windows 键盘上,meta 键是 Windows 键 (⊞)。
组合按键
当常规+常规组合监听时,效果是两个键每一个
都可以触发一次监听事件。例如:
<template><input type="text" @keyup.1.a="console.log('a || 1')">
</template>
当常规+系统组合监听时,效果是两个键同时按下
时触发一次监听事件。
<template><input type="text" @keyup.ctrl.a="console.log('ctrl && a')">
</template>
请注意,系统按键修饰符和常规按键不同。与
keyup
事件一起使用时,该按键必须在事件发出时处于按下状态。换句话说,keyup.ctrl
只会在你仍然按住ctrl
但松开了另一个键时被触发。若你单独松开ctrl
键将不会触发。
exact 修饰符
exact
翻译为准确的
,是为了我们可以准确的使用键盘事件。该修饰符只能用于常规+系统组合。例如:
<!-- 当按下 Ctrl 点击按钮时,即使同时按下 Alt 或 Shift 也会触发 -->
<button @click.ctrl="onClick">A</button><!-- 仅当按下 Ctrl 且未按任何其他键时才会触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button><!-- 仅当没有按下任何系统按键时触发 -->
<button @click.exact="onClick">A</button>
鼠标按键修饰符
.left
.right
.middle
这些修饰符将处理程序限定为由特定鼠标按键触发的事件。