07、事件处理

监听事件

用法：v-on:click="methodName" 或 @click="handler"。

事件处理器的值可以是：

1. 内联事件处理器

2. 方法事件处理器

---

内联事件处理器

方法事件处理器

既然说到这里就来加深以下印象：

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

event.target_萌动的小心灵的博客-CSDN博客_event.target 属性