---
title: 03-v-on的事件修饰符
publish: true
---
## v-on的事件修饰符
### v-on的常见事件修饰符
`v-on` 提供了很多事件修饰符来辅助实现一些功能。事件修饰符有如下：
- `.stop` 阻止冒泡。本质是调用 event.stopPropagation()。
- `.prevent` 阻止默认事件（默认行为）。本质是调用 event.preventDefault()。
- `.capture` 添加事件监听器时，使用捕获的方式（也就是说，事件采用捕获的方式，而不是采用冒泡的方式）。
- `.self` 只有当事件在该元素本身（比如不是子元素）触发时，才会触发回调。
- `.once` 事件只触发一次。
- `.{keyCode | keyAlias}` 只当事件是从侦听器绑定的元素本身触发时，才触发回调。
- `.native` 监听组件根元素的原生事件。
PS：一个事件，允许同时使用多个事件修饰符。
写法示范：
```html
```
### `.stop`的举例
我们来看下面这个例子：
```html
Document
```
上方代码中，存在冒泡的现象，父标签中包含了一个子标签。当点击子标签时，父标签也会被触发。打印顺序是：
```
child 被点击了
father 被点击了
```
那么问题来了，如果我不想让子标签的点击事件冒泡到父亲，该怎么做呢？办法是：给子标签加一个**事件修饰符**`.stop`，阻止冒泡。代码如下：
```html
```
阻止冒泡后，当点击子标签时，打印结果是：
```
child 被点击了
```
PS：我发现一个有意思的现象。上方的这行代码中，如果把`.stop`改为`:stop`，造成的现象是，父标签被触发了，而子标签没有被触发。
### `.capture`举例
`.capture`：触发事件时，采用捕获的形式，而不是冒泡的形式。
还是采用上面的例子：当按钮点击时，如果想要采取捕获的方式，而不是冒泡的方式，办法是：可以直接在父标签上加事件修饰符`.capture`。代码如下：
```html