@H_ 126 _18@正文
在 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="methodN am e"></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)"> ;m inus</button>
</div>
以上代码， button 在绑定了 onClickAdd 和 onClickMinus 处理函数后不会立即执行，而是当事件触发后才执行，这会开头我们说的 addEventListenet 是一样的！
而 onClickAdd 和 onClickMinus 的括号是为了方便我们传递想要参数方便在 meth DOS 里进行处理。
这里有一个特殊的参数 $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.p rev entDefault() 或 event.stop PR opagation() 是很常见的。 Vue 提供了一套「修饰符」来帮助我们完成这些事件，这么做的目的是让开发者更专注于数据逻辑而 不用 去处理 DOM 事件的 细节 。
修饰符是用 . 表示的指令后缀，包含以下这些：
.stop ：阻止事件冒泡。 .prevent ：阻止事件的默认行为。 .self ：当 event.t arg et 是元素本身时才会触发事件处理器 。 .capture ：采用事件捕获。 .once ：事件调用一次后，自动移除监听器。 .passive ：修饰符一般用于触摸事件的监听器，可以用来 改善移动端设备的滚屏性能 。⚠️ 注意
不能同时使用 .passive 和 .prevent ，因为 .passive 已经向浏览器 表明 了你 不想 阻止事件的默认行为。
如果你这么做了，则 .prevent 会被忽略，并且浏览器会抛出警告。
<!-- 单击事件将停止传递 --> <a @click.stop="doThis"></a> <!-- 提交事件将不再重新加载页面 --> <form @s ub m IT .prevent="onSubmit"></form> <!-- 修饰语可以使用链式书写 --> <a @click.stop.prevent="doT hat "></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 为什么会在 HT ML 中监听事件？
我们发现 Vue 是在 template 中直接绑定事件的，这违背了「关注点分离」的概念。但是不用担心， Vue 把事件处理方法和表达式都严格的绑定到当前视图的 ViewModel 上，他不会导致任何维护上的 困难 。
当我们使用 v-on 在视图上绑定事件处理，有几个好处：
1、扫一眼 HTML 模版便能轻松定位 JavaScript 里 面对 应的方法。
2、无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非纯粹的逻辑，和 DOM 完全解藕，更容易测试。
3、当一个 ViewModel 销毁的时候，所有的事件处理器都会自动被删除。你需要担心如何清理它们。
以上就是Vue 事件处理函数的绑定示例详解的详细内容，更多关于Vue 事件处理函数绑定的资料请关注其它相关 文章 ！
您可能感兴趣的文章: vue3+TS 实现自定义指令长按触发绑定的函数 VUE v-for循环中每个item节点动态绑定不同函数的实例 vue中引入mousewheel事件及兼容性处理方式 Vue3 之 Vue 事件处理指南 Vue事件处理原理及过程详解
总结
以上是 为你收集整理的 Vue 事件处理函数的绑定示例详解 全部内容，希望文章能够帮你解决 Vue 事件处理函数的绑定示例详解 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于Vue 事件处理函数的绑定示例详解的详细内容...