监听事件
用法:v-on:click="methodName"
或 @click="handler"
。
事件处理器的值可以是:
-
内联事件处理器
-
方法事件处理器
内联事件处理器
方法事件处理器
既然说到这里就来加深以下印象:
event.target 获取的是触发事件的真实元素
event.currentTarget 获取到的是事件绑定的元素
在使用event对象时,event对象有两个属性target和currentTarget,这两属性都代表事件源,由于事件冒泡和捕获的原因
1)target:而直接的事件源(真正的事件源)是target。
2)currentTarget:经过冒泡或者捕获触发的父级的DOM元素是currentTarget。冒泡到哪个父元素,那么currentTarget就是哪个父元素。
3)this:在事件处理函数中,this就是currentTarget。
例子:
event.target经常使用的属性有以下几个:
event.target.nodeName //获取事件触发元素标签name
event.target.id //获取事件触发元素id
event.target.className //获取事件触发元素classname
event.target.innerHTML //获取事件触发元素的内容
nodeName
和 tagName
是获取 HTML 节点名称的属性。
tagName
用于获取节点类型为 1 的元素节点的类型。
对于属性、注释、文本等其他类型的节点,使用 nodeName
获取节点的名称。
在内联事件处理器中访问事件参数
需要在内联事件处理器中访问原生 DOM 事件。传入一个特殊的 $event
变量,或者使用内联箭头函数
事件修饰符
在处理事件时调用 event.preventDefault()
或 event.stopPropagation()
是很常见的。
preventDefault() 方法阻止元素发生默认的行为(例如,当点击提交按钮时阻止对表单的提交,防止链接打开 URL:)。
event.stopPropagation()阻止捕获和冒泡阶段中当前事件的进一步传播
Vue 为 v-on
提供了事件修饰符。
使用修饰符时需要注意调用顺序
用
@click.prevent.self
会阻止元素及其子元素的所有点击事件的默认行为而@click.self.prevent
则只会阻止对元素本身的点击事件的默认行为。
.capture
、.once
和 .passive
修饰符与原生 addEventListener 事件相对应:
.passive
修饰符一般用于触摸事件的监听器,可以用来改善移动端设备的滚屏性能。
请勿同时使用
.passive
和.prevent
,因为.passive
已经向浏览器表明了你不想阻止事件的默认行为。如果你这么做了,则.prevent
会被忽略,并且浏览器会抛出警告。
按键修饰符
在监听键盘事件时,我们经常需要检查特定的按键。Vue 允许在 v-on
或 @
监听按键事件时添加按键修饰符。
可以直接使用 KeyboardEvent.key 暴露的按键名称作为修饰符,但需要转为 kebab-case 形式。
仅会在 $event.key
为 'PageDown'
时调用事件处理。
按键别名
系统按键修饰符
使用以下系统按键修饰符来触发鼠标或键盘事件监听器,只有当按键被按下时才会触发。
.exact
修饰符
允许控制触发一个事件所需的确定组合的系统按键修饰符
鼠标按键修饰符
原文链接:https://blog.csdn.net/jiang7701037/article/details/81481263