前端_Vue_6.事件处理

1.1. 监听事件

我们可以使用 v-on 指令&＃xff08;简写位&＃64;&＃xff09;来监听DOM事件&＃xff0c;并在事件触发时执行对应的Javascript。用法&＃xff1a;v-on:click&＃61;“methodName” 或 &＃64;click&＃61;“handler”。

事件处理器的值可以是&＃xff1a;

1. 内联事件处理器&＃xff1a;事件被触发时执行的内联Javascript语句&＃xff08;与onclick类似&＃xff09;。
2. 方法事件处理器&＃xff1a;一个指向组件上定义的方法的属性名或是路径。

1.2. 内联事件处理器

内联事件处理器通常用于简单场景&＃xff08;内联这玩意儿&＃xff0c;也称行内&＃xff0c;一般是写在标签上的&＃xff0c;这就注定了它不宜搞太复杂&＃xff09;&＃xff0c;例如&＃xff1a;

data() {
return {
count: 0
}
}


<button &＃64;click&＃61;"count&＃43;&＃43;">Add 1button>
<p>Count is:{{ count }}p>


1.3. 方法事件处理器

随着事件处理器的逻辑变得复杂&＃xff0c;内联代码方式变得不够灵活。因此 v-on 也可以接受一个方法名或对某个方法的调用。

举例来说&＃xff1a;

data() {
return {
name: &＃39;Vue.js&＃39;
}
},
methods: {
greet(event) {
// 方法中的this指向当前活跃的组件实例
alert(&＃39;Hello ${this.name}!&＃39;)
// event 是 DOM 原生事件
if (event) {
alert(event.target.tagName)
}
}
}



<button &＃64;click&＃61;"greet">Greetbutton>


方法事件处理器会自动接收原生DOM事件并触发执行。在上面的例子中&＃xff0c;我们能够通过被触发事件的 event.target.tagName 访问到该 DOM 元素。

1.3.1. 方法与内联事件判断

模板编译器会通过检查 v-on 的值是否是合法的Javascript标识符或属性访问路径来断定是何种形式的事件处理器。举例来说&＃xff0c; foo 、 foo.bar 和 foo[‘bar’] 会被视为方法事件处理器&＃xff0c;而 foo() 和 count&＃43;&＃43; 会被视为内联事件处理器。

1.4. 在内联处理器中调用方法

除了直接绑定方法名&＃xff0c;你还可以在内联事件处理器中调用方法。这允许我们向方法传入自定义参数以代替原生事件&＃xff1a;

methods: {
say(message) {
alert(message)
}
}


<button &＃64;click&＃61;"say(&＃39;hello&＃39;)">Say hellobutton>
<button &＃64;click&＃61;"say(&＃39;bye&＃39;)">Say byebutton>


1.5. 在内联事件处理器中访问事件参数

有时我们需要在内联事件处理器中访问原生 DOM 事件。你可以向该处理器方法传入一个特殊的 $event 变量&＃xff0c;或者使用内联箭头函数&＃xff1a;


<button &＃64;click&＃61;"warn(&＃39;Form cannot be submitted yet.&＃39;, $event)">
Submit
button>

<button &＃64;click&＃61;"(event) &＃61;> warn(&＃39;Form cannot be submitted yet.&＃39;, event)">
Submit
button>


methods: {
warn(message, event) {
// 这里可以访问 DOM 原生事件
if (event) {
event.preventDefault()
}
alert(message)
}
}


1.6. 事件修饰符

在处理事件时调用 event.preventDefault() 或 event.stopPropagation() 是很常见的。尽管我们可以直接在方法内调用&＃xff0c;但如果方法能更专注于数据逻辑而不用去处理DOM事件的细节会更好。

为解决这一问题&＃xff0c;Vue为 v-on 提供了 事件修饰符。修饰符是用 . 表示的指令后缀&＃xff0c;包含以下这些&＃xff1a;

• .stop
• .prevent
• .selt
• .capture
• .once
• .passive


<a &＃64;click.stop&＃61;"doThis">a>

<form &＃64;submit.prevent&＃61;"onSubmit">form>

<a &＃64;click.stop.prevent&＃61;"doThat">a>

<form &＃64;submit.prevent>form>


<div &＃64;click.selt&＃61;"doThat">...div>


提示&＃xff1a;
使用修饰符时需要注意调用顺序&＃xff0c;因为相关代码是以相同的顺序生成的。因此使用 &＃64;click.prevent.self 会阻止元素及其子元素的所有点击事件的默认行为而&＃64;click.selt.prevent则只会阻止对元素本身的点击事件的默认行为。

.capture、.once和.passive修饰符与原生 addEventListener 事件相对应&＃xff1a;



<div &＃64;click.capture&＃61;"doThis">...div>

<a &＃64;click.once&＃61;"doThis">a>


<div &＃64;scroll.passive&＃61;"onScroll">...div>


.passive 修饰符一般用于触摸事件的监听器&＃xff0c;可以用来改善移动端设备的滚屏性能。

提示
请勿同时使用 .passive 和 .prevent&＃xff0c;因为.passive 已经向浏览器表明了你不想阻止事件的默认行为。如果你这么做了&＃xff0c;则.prevent会被忽略&＃xff0c;并且浏览器会抛出警告。

1.7. 按键修饰符

在监听键盘事件时&＃xff0c;我们经常需要检查特定的按键。Vue允许在 v-on 或 &＃64; 监听事件时添加按键修饰符。


<input &＃64;keyup.enter&＃61;"submit"/>


你可以直接使用 KeyboardEvent.key 暴露的按键名称作为修饰符&＃xff0c;但需要转为 kebab-case&＃xff08;短横杠&＃xff09;形式。

<input &＃64;keyup.page-down&＃61;"onPageDown"/>


该例中&＃xff0c;仅回在 $event.key为PageDown时调用事件处理器。

1.7.1. 按键别名

Vue为一些常用的按键提供了别名&＃xff1a;

• .enter
• .tab
• .delete&＃xff08;捕获 “Delete” 和 “Backspace” 两个按键&＃xff09;
• .esc
• .space
• .up
• .down
• .left
• .right

1.7.2. 系统按键修饰符

你可以使用以下系统按键修饰符来触发鼠标或键盘事件监听器&＃xff0c;只有当按键被按下时才会触发。

• .ctrl
• .alt
• .shift
• .meta

举例来说&＃xff1a;


<input &＃64;keyup.alt.enter&＃61;"clear"/>

<div &＃64;click.ctrl&＃61;"doSomething">Do something div>


提示
系统按键修饰符与常规按键不同。与 keyup 事件一起使用时&＃xff0c;该按键必须在事件发出时处于按下状态。换句话说&＃xff0c;keyup.ctrl 只会在你仍然按住 ctrl 但松开了另一个键时被触发。若你单独松开 ctrl 键将不会触发。

1.7.3. .exact 修饰符

.exact 修饰符允许控制触发一个事件所需的确定组合的系统按键修饰符。


<button &＃64;click.ctrl&＃61;"onClick">Abutton>

<button &＃64;click.ctrl.exact&＃61;"onCtrlClick">Abutton>

<button &＃64;click.exact&＃61;"onClick">Abutton>


1.8. 鼠标按键修饰符

• .left
• .right
• .middle

这些修饰符将处理程序限定为由特定鼠标按键触发的事件。