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

第

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

目录正文Vue的事件处理绑定事件修饰符按键修饰符Vue为什么会在HTML中监听事件？

正文

在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指令让开发者对元素绑定事件处理函数，例如：

divv-on:click=methodName/div

!--或者使用@click对v-on进行简写--

div@click=handler/div

v-on的值可以是JS表达式：

button@click=count+=1Add/button

不推荐这样做，应该把逻辑放到methods里面处理。

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

button@click=onClickAddAdd/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内部封装的一个属性，表示触发事件的事件对象。

constapp={

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=onClickMinusMinus/button

/div

只要在两个方法的中间用,分隔就可以同时绑定两个事件处理函数啦。

事件修饰符

我们在处理事件时可能会调用event.preventDefault()或event.stopPropagation()是很常见的。Vue提供了一套「修饰符」来帮助我们完成这些事件，这么做的目的是让开发者更专注于数据逻辑而不用去处理DOM事件的细节。

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

.stop：阻止事件冒泡。.prevent：阻止事件的默认行为。.self：当event.target是元素本身时才会触