Vue 事件处理函数的绑定示例详解
正文
在 JS 中「事件」是不需要绑定的,浏览器自带了许多的事件,每个事件都可以去绑定「处理器(处理函数)」。
事件 ==> 用户行为 ==> 触发浏览器的事件 ==> 执行对应的事件处理函数
我们通常通过addEventListenet
方法去给事件绑定处理函数:
document.addEventListenet("click", function () {
// do...
}, flase);
需要注意的是addEventListenet
只是「绑定」事件处理函数并不是「执行」!处理函数只会在对应事件触发的时候才会进行执行。
某些情况下,我们需要把处理函数独立出去,并且需要更改this
的执行,这是因为事件处理函数的this
指向元素本身,也就意味着我们不能使用.call
来更改this
的指向,因为.call
方法会立即执行函数!
// 这会导致 test 立即执行!
document.addEventListenet("click", test.call(this), flase);
// 可以利用 .bind 方法放心的去指向 this,因为 bind 不会立即执行
document.addEventListenet("click", test.bind(this), flase);
Vue 的事件处理绑定
来到Vue
,Vue
提供了v-on
指令让开发者对元素绑定事件处理函数,例如:
<div v-on:click="methodName"></div>
<!-- 或者使用 @click 对 v-on 进行简写 -->
<div @click="handler"></div>
v-on
的值可以是JS
表达式:
<button @click="count += 1">Add</button>
不推荐这样做,应该把逻辑放到methods
里面处理。
v-on
的值还可以是一个方法事件处理器:
<button @click="onClickAdd">Add</button>
@click
接受一个方法名或对某个方法的调用。
当通过方法名去绑定事件处理函数的时候,我们可以给方法传递参数:
<div>
<h1>{{ count }}</h1>
<button @click="onClickAdd(2)">Add</button>
<button @click="onClickMinus(2, $event)">Minus</button>
</div>
以上代码,button
在绑定了onClickAdd
和onClickMinus
处理函数后不会立即执行,而是当事件触发后才执行,这会开头我们说的addEventListenet
是一样的!
而onClickAdd
和onClickMinus
的括号是为了方便我们传递想要参数方便在methdos
里进行处理。
这里有一个特殊的参数$event
,该属性是Vue
内部封装的一个属性,表示触发事件的事件对象。
const app = {
template: `<button @click="onClickMinus(2, $event)">Minus</button>`,
data(){
return {
count: 0
}
}
methods:{
onClickMinus(num, e){
console.log(e);
this.count += num;
}
}
}
v-on
指令还可以同时绑定多个事件处理函数,例如:
<div>
<h1>{{ count }}</h1>
<button @click="onClickAdd(),setLog()">Add</button>
<button @click="onClickMinus">Minus</button>
</div>
只要在两个方法的中间用,
分隔就可以同时绑定两个事件处理函数啦。
事件修饰符
我们在处理事件时可能会调用event.preventDefault()
或event.stopPropagation()
是很常见的。Vue
提供了一套「修饰符」来帮助我们完成这些事件,这么做的目的是让开发者更专注于数据逻辑而不用去处理DOM
事件的细节。
修饰符是用 . 表示的指令后缀,包含以下这些:
.stop
:阻止事件冒泡。.prevent
:阻止事件的默认行为。.self
:当event.target
是元素本身时才会触发事件处理器 。.capture
:采用事件捕获。.once
:事件调用一次后,自动移除监听器。.passive
:修饰符一般用于触摸事件的监听器,可以用来改善移动端设备的滚屏性能。
⚠️ 注意
不能同时使用.passive
和.prevent
,因为.passive
已经向浏览器表明了你不想阻止事件的默认行为。
如果你这么做了,则.prevent
会被忽略,并且浏览器会抛出警告。
<!-- 单击事件将停止传递 -->
<a @click.stop="doThis"></a>
<!-- 提交事件将不再重新加载页面 -->
<form @submit.prevent="onSubmit"></form>
<!-- 修饰语可以使用链式书写 -->
<a @click.stop.prevent="doThat"></a>
<!-- 也可以只有修饰符 -->
<form @submit.prevent></form>
<!-- 仅当 event.target 是元素本身时才会触发事件处理器 -->
<!-- 例如:事件处理器不来自子元素 -->
<div @click.self="doThat">...</div>
使用修饰符时需要注意调用顺序,因为相关代码是以相同的顺序生成的。因此使用@click.prevent.self
会阻止元素及其子元素的所有点击事件的默认行为,而@click.self.prevent
则只会阻止对元素本身的点击事件的默认行为。
按键修饰符
我们通过可能还需要通过event.keycode
来判断用户触发的按键,Vue
允许在v-on
或@
监听按键事件时添加按键修饰符,例如:
<!-- 仅在 `key` 为 `Enter` 时调用 `submit` -->
<input @keyup.enter="submit" />
你可以直接使用KeyboardEvent.key
暴露的按键名称作为修饰符,但需要转为 kebab-case 形式。
<input @keyup.page-down="onPageDown" />
Vue
为一些常用的按键提供了别名:
.enter
.tab
.delete
(捕获“Delete
”和“Backspace
”两个按键).esc
.space
.up
.down
.left
.right
你可以使用以下系统按键修饰符来触发鼠标或键盘事件监听器,只有当按键被按下时才会触发。
.ctrl
.alt
.shift
.meta
例如:
<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />
<!-- Ctrl + 点击 -->
<div @click.ctrl="doSomething">Do something</div>
请注意,系统按键修饰符和常规按键不同。与keyup
事件一起使用时,该按键必须在事件发出时处于按下状态。
换句话说,keyup.ctrl
只会在你仍然按住ctrl
但松开了另一个键时被触发。若你单独松开ctrl
键将不会触发。
.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
这些修饰符将处理程序限定为由特定鼠标按键触发的事件。
Vue 为什么会在 HTML 中监听事件?
我们发现Vue
是在template
中直接绑定事件的,这违背了「关注点分离」的概念。但是不用担心,Vue
把事件处理方法和表达式都严格的绑定到当前视图的ViewModel
上,他不会导致任何维护上的困难。
当我们使用v-on
在视图上绑定事件处理,有几个好处:
1、扫一眼HTML
模版便能轻松定位JavaScript
里面对应的方法。
2、无须在JavaScript
里手动绑定事件,你的ViewModel
代码可以是非纯粹的逻辑,和DOM
完全解藕,更容易测试。
3、当一个ViewModel
销毁的时候,所有的事件处理器都会自动被删除。你需要担心如何清理它们。
以上就是Vue 事件处理函数的绑定示例详解的详细内容,更多关于Vue 事件处理函数绑定的资料请关注编程网其它相关文章!
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341