> For the complete documentation index, see [llms.txt](https://zpliu.gitbook.io/booknote/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://zpliu.gitbook.io/booknote/vue/09-shi-jian-chu-li.md).

# 事件处理

## 1.监听事件

```
 使用`v-on`指令监听DOM事件，并且在事件被触发是执行一些javascripte代码
```

​ 当需要执行的javascripte代码比较复杂的时候，可以将监听的事件交给一个需要调用的方法进行处理

```javascript
<button v-on:click="greet"></button>
methods:{
    greet:function(){
    console.log("你好呀")
    }
}
//传递参数给事件处理函数
<button v-on:click="greet('someStr')"></button>

//传递事件对象给处理函数
<button v-on:click="greet($event)"></button>
```

## 2.事件修饰符

在平常对DOM的操作中经常涉及到事件的种种情况，例如阻止事件跳转、事件只执行一次等等。Vue中更好的方法是将事件处理函数尽量的少涉及DOM事件的操作，只负责逻辑层

* `.stop`
* `.prevent`
* `.capture`
* `.self`
* `.once`
* `.passive`

```markup
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>
```

## 3.按键和鼠标的监听

```javascript
//当鼠标按下回车时触发事件
<input v-on:keyup.enter="handerEnter" v-model="inputTag">

    //Vue事件methods内容
    handerEnter(){
                alert(this.inputTag)
        }
```