Vue 事件处理函数的绑定示例详解

吕从敢

正文

在 JS 中「事件」是不需要绑定的，浏览器自带了许多的事件，每个事件都可以去绑定「处理器（处理函数）」。
事件 ==> 用户行为 ==> 触发浏览器的事件 ==> 执行对应的事件处理函数
我们通常通过

1. addEventListenet

复制代码

方法去给事件绑定处理函数：

1. document.addEventListenet("click", function () {
   
2.   // do...
   
3. }, flase);

复制代码

需要注意的是

1. addEventListenet

复制代码

只是「绑定」事件处理函数并不是「执行」！处理函数只会在对应事件触发的时候才会进行执行。
某些情况下，我们需要把处理函数独立出去，并且需要更改

1. this

复制代码

的执行，这是因为事件处理函数的

1. this

复制代码

指向元素本身，也就意味着我们不能使用

1. .call

复制代码

来更改

1. this

复制代码

的指向，因为

1. .call

复制代码

方法会立即执行函数！

1. // 这会导致 test 立即执行！
   
2. document.addEventListenet("click", test.call(this), flase);

复制代码

1. // 可以利用 .bind 方法放心的去指向 this，因为 bind 不会立即执行
   
2. document.addEventListenet("click", test.bind(this), flase);

复制代码

Vue 的事件处理绑定

来到

1. Vue

复制代码

，

1. Vue

复制代码

提供了

1. v-on

复制代码

指令让开发者对元素绑定事件处理函数，例如：

1. <div v-on:click="methodName"></div>
   
2. <!-- 或者使用 @click 对 v-on 进行简写 -->
   
3. <div @click="handler"></div>

复制代码

1. v-on

复制代码

的值可以是

1. JS

复制代码

表达式：

1. <button @click="count += 1">Add</button>

复制代码

不推荐这样做，应该把逻辑放到

1. methods

复制代码

里面处理。

1. v-on

复制代码

的值还可以是一个方法事件处理器：

1. <button @click="onClickAdd">Add</button>

复制代码

1. @click

复制代码

接受一个方法名或对某个方法的调用。
当通过方法名去绑定事件处理函数的时候，我们可以给方法传递参数：

1. <div>
   
2.   <h1>{{ count }}</h1>
   
3.   <button @click="onClickAdd(2)">Add</button>
   
4.   <button @click="onClickMinus(2, $event)">Minus</button>
   
5. </div>

复制代码

以上代码，

1. button

复制代码

在绑定了

1. onClickAdd

复制代码

和

1. onClickMinus

复制代码

处理函数后不会立即执行，而是当事件触发后才执行，这会开头我们说的

1. addEventListenet

复制代码

是一样的！
而

1. onClickAdd

复制代码

和

1. onClickMinus

复制代码

的括号是为了方便我们传递想要参数方便在

1. methdos

复制代码

里进行处理。
这里有一个特殊的参数

1. $event

复制代码

，该属性是

1. Vue

复制代码

内部封装的一个属性，表示触发事件的事件对象。

1. const app = {
   
2.   template: `<button @click="onClickMinus(2, $event)">Minus</button>`,
   
3.   data(){
   
4.     return {
   
5.       count: 0
   
6.     }
   
7.   }
   
8.   methods:{
   
9.     onClickMinus(num, e){
   
10.       console.log(e);
    
11.       this.count += num;
    
12.     }
    
13.   }
    
14. }

复制代码

1. v-on

复制代码

指令还可以同时绑定多个事件处理函数，例如：

1. <div>
   
2.   <h1>{{ count }}</h1>
   
3.   <button @click="onClickAdd(),setLog()">Add</button>
   
4.   <button @click="onClickMinus">Minus</button>
   
5. </div>

复制代码

只要在两个方法的中间用

1. ,

复制代码

分隔就可以同时绑定两个事件处理函数啦。

事件修饰符

我们在处理事件时可能会调用

1. event.preventDefault()

复制代码

或

1. event.stopPropagation()

复制代码

是很常见的。

1. Vue

复制代码

提供了一套「修饰符」来帮助我们完成这些事件，这么做的目的是让开发者更专注于数据逻辑而不用去处理

1. DOM

复制代码

事件的细节。
修饰符是用 . 表示的指令后缀，包含以下这些：

• 1. .stop

  复制代码
  ：阻止事件冒泡。
  
• 1. .prevent

  复制代码
  ：阻止事件的默认行为。
  
• 1. .self

  复制代码
  ：当
  1. event.target

  复制代码
  是元素本身时才会触发事件处理器 。
  
• 1. .capture

  复制代码
  ：采用事件捕获。
  
• 1. .once

  复制代码
  ：事件调用一次后，自动移除监听器。
  
• 1. .passive

  复制代码
  ：修饰符一般用于触摸事件的监听器，可以用来改善移动端设备的滚屏性能。
  

⚠️ 注意
不能同时使用

1. .passive

复制代码

和

1. .prevent

复制代码

，因为

1. .passive

复制代码

已经向浏览器表明了你不想阻止事件的默认行为。
如果你这么做了，则

1. .prevent

复制代码

会被忽略，并且浏览器会抛出警告。

1. <!-- 单击事件将停止传递 -->
   
2. <a @click.stop="doThis"></a>
   
3. 
   
4. <!-- 提交事件将不再重新加载页面 -->
   
5. <form @submit.prevent="onSubmit"></form>
   
6. 
   
7. <!-- 修饰语可以使用链式书写 -->
   
8. <a @click.stop.prevent="doThat"></a>
   
9. 
   
10. <!-- 也可以只有修饰符 -->
    
11. <form @submit.prevent></form>
    
12. 
    
13. <!-- 仅当 event.target 是元素本身时才会触发事件处理器 -->
    
14. <!-- 例如：事件处理器不来自子元素 -->
    
15. <div @click.self="doThat">...</div>

复制代码

使用修饰符时需要注意调用顺序，因为相关代码是以相同的顺序生成的。因此使用

1. @click.prevent.self

复制代码

会阻止元素及其子元素的所有点击事件的默认行为，而

1. @click.self.prevent

复制代码

则只会阻止对元素本身的点击事件的默认行为。

按键修饰符

我们通过可能还需要通过

1. event.keycode

复制代码

来判断用户触发的按键，

1. Vue

复制代码

允许在

1. v-on

复制代码

或

1. @

复制代码

监听按键事件时添加按键修饰符，例如：

1. <!-- 仅在 `key` 为 `Enter` 时调用 `submit` -->
   
2. <input @keyup.enter="submit" />

复制代码

你可以直接使用

1. KeyboardEvent.key

复制代码

暴露的按键名称作为修饰符，但需要转为 kebab-case 形式。

1. <input @keyup.page-down="onPageDown" />

复制代码

1. Vue

复制代码

为一些常用的按键提供了别名：

• 1. .enter

  复制代码
• 1. .tab

  复制代码
• 1. .delete

  复制代码
  (捕获“
  1. Delete

  复制代码
  ”和“
  1. Backspace

  复制代码
  ”两个按键)
  
• 1. .esc

  复制代码
• 1. .space

  复制代码
• 1. .up

  复制代码
• 1. .down

  复制代码
• 1. .left

  复制代码
• 1. .right

  复制代码

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

• 1. .ctrl

  复制代码
• 1. .alt

  复制代码
• 1. .shift

  复制代码
• 1. .meta

  复制代码

例如：

1. <!-- Alt + Enter -->
   
2. <input @keyup.alt.enter="clear" />
   
3. 
   
4. <!-- Ctrl + 点击 -->
   
5. <div @click.ctrl="doSomething">Do something</div>

复制代码

请注意，系统按键修饰符和常规按键不同。与

1. keyup

复制代码

事件一起使用时，该按键必须在事件发出时处于按下状态。
换句话说，

1. keyup.ctrl

复制代码

只会在你仍然按住

1. ctrl

复制代码

但松开了另一个键时被触发。若你单独松开

1. ctrl

复制代码

键将不会触发。

1. .exact

复制代码

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

1. <!-- 当按下 Ctrl 时，即使同时按下 Alt 或 Shift 也会触发 -->
   
2. <button @click.ctrl="onClick">A</button>
   
3. 
   
4. <!-- 仅当按下 Ctrl 且未按任何其他键时才会触发 -->
   
5. <button @click.ctrl.exact="onCtrlClick">A</button>
   
6. 
   
7. <!-- 仅当没有按下任何系统按键时触发 -->
   
8. <button @click.exact="onClick">A</button>

复制代码

你可以使用以下鼠标按键修饰符来触发鼠标事件监听器：

• 1. .left

  复制代码
• 1. .right

  复制代码
• 1. .middle

  复制代码

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

Vue 为什么会在 HTML 中监听事件？

我们发现

1. Vue

复制代码

是在

1. template

复制代码

中直接绑定事件的，这违背了「关注点分离」的概念。但是不用担心，

1. Vue

复制代码

把事件处理方法和表达式都严格的绑定到当前视图的

1. ViewModel

复制代码

上，他不会导致任何维护上的困难。
当我们使用

1. v-on

复制代码

在视图上绑定事件处理，有几个好处：
1、扫一眼

1. HTML

复制代码

模版便能轻松定位

1. JavaScript

复制代码

里面对应的方法。
2、无须在

1. JavaScript

复制代码

里手动绑定事件，你的

1. ViewModel

复制代码

代码可以是非纯粹的逻辑，和

1. DOM

复制代码

完全解藕，更容易测试。
3、当一个

1. ViewModel

复制代码

销毁的时候，所有的事件处理器都会自动被删除。你需要担心如何清理它们。
以上就是Vue 事件处理函数的绑定示例详解的详细内容，更多关于Vue 事件处理函数绑定的资料请关注脚本之家其它相关文章！

来源:https://www.jb51.net/article/276270.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！