#完整原文地址见简书www.jianshu.com/p/dc2f242f0… #更多完整Vue笔记目录敬请见《前端 Web 笔记 汇总目录（Updating）》
#本文内容提要
简单的事件逻辑，可以直接用表达式 代替 函数 作为
@click的参数MouseEvent对象 了解
事件函数传入参
事件函数传入参 同时获取 原生MouseEvent对象的 写法
一个按钮 同时触发多个 回调函数 的写法
Vue的事件传递
Vue的默认事件传递是
由里而外的【与安卓 自上而下的事件分发机制 恰恰相反】可以使用
.stop修饰符，拦截事件外传
@click的.self修饰符
@click的.capture修饰符
@click的.once/.prevent修饰符
@click的鼠标修饰符left、right、middle
@click的精确修饰符.exact
@scroll.passive的.passive可以提高滚动性能按键事件指令
@keydown
@keydown的按键修饰符.enter
@keydown的按键修饰符tab、delete、esc、up、down、left、right等
####简单的事件逻辑，可以直接用表达式 代替 函数 作为 `@click`的参数 **methods函数型：** ``` Hello World! heheheheheheda ```
**简化表达式型：** ``` ``` 效果：
####MouseEvent对象 了解 **事件响应函数无入参时，默认第一个参数，即是`MouseEvent`对象：** ``` ``` **点击打印`MouseEvent对象`：** **其中，`event.target`是 被点击到的组件：** ``` ``` **效果图：**
####事件函数传入参 案例代码： ``` ``` **实现内容即，点击按钮时，counter加2：**
####事件函数传入参 同时获取 原生MouseEvent对象的 写法 **即如`button`， 在事件函数调用时候，`末尾入参`处，加上 入参变量` $event`：** ``` ``` 点击打印：
####一个按钮 同时触发多个 回调函数 的写法 **在`methods`中准备好回调方法， 将`要回调的函数名`以逗号隔开，作为`@click`的参数即可：** ``` ``` **运行代码，点击按钮一次，效果：**
####Vue的事件传递 **Vue的默认事件传递是`由里而外`的【与安卓[ 自上而下的事件分发机制 ](https://www.jianshu.com/p/6c8e8452bb70)恰恰相反】：
如下，我们设置一层div组件，里面套着一个button， 内外两层皆设置点击事件，进行观察：** ``` Hello World! heheheheheheda ``` **运行，点击按钮，日志如下， 验证了 Vue的`事件传递`是`由里而外`的： **
**可以使用`.stop`修饰符，拦截事件外传：** ``` ``` **运行，点击按钮，效果如下，成功拦截：**
####`@click`的`.self`修饰符 **修饰在外层DOM组件的`@click`上， 使得 仅在点击 `外层组件本身（如下代码的外层
）` 或 `仅隶属于外层组件`的组件（如下代码的`{{counter}}`）的时候，
才会回调`外层组件`的回调方法，
而点击内部标签组件元素（如下代码的`button`）时候，
不会触发`外层组件`的回调方法：**
```
```
####`@click`的`.capture`修饰符 **`.capture`修饰符 使得`事件处理顺序`变成`从外到内`:** ``` ``` 运行效果：
####`@click`的`.once`/`.prevent`修饰符 **`.once`使得对应事件仅执行一次； `.prevent`则用于阻止默认行为； 这两个修饰符在之前的博客中都有涉及过；**
####`@click`的鼠标修饰符`left`、`right`、`middle` 左键、右键、中间滚轮
####`@click`的精确修饰符`.exact` **常规点击修饰符 修饰组件，如：** ``` ``` **按住ctrl键 或者 按住ctrl键同时按住其他键，再点击组件，都可以响应回调：** **加上`.exact`之后，只有单独按ctrl键点击组件才响应：** ```
####`@scroll.passive`的`.passive`可以提高滚动性能
####按键事件指令`@keydown` **常规的按键回调指令是`@keydown`， 被该指令修饰的组件，只要点击了，就会触发相关的回调方法：** ``` Hello World! heheheheheheda ``` 
####`@keydown`的按键修饰符`.enter` **当`.enter`修饰`按键事件指令`时，对应的组件需要输入`回车键`， 才会触发`按键事件`keydown`回调`：** ``` ``` 效果：
####`@keydown`的按键修饰符`tab`、`delete`、`esc`、`up`、`down`、`left`、`right`等 **意义同理于以上的`.enter`，被修饰的对应的组件需要输入`对应修饰符的键`， 才会触发`按键事件`keydown`回调`；**
####`@click`的`.capture`修饰符 **`.capture`修饰符 使得`事件处理顺序`变成`从外到内`:** ``` ``` 运行效果：
####`@click`的`.once`/`.prevent`修饰符 **`.once`使得对应事件仅执行一次； `.prevent`则用于阻止默认行为； 这两个修饰符在之前的博客中都有涉及过；**
####`@click`的鼠标修饰符`left`、`right`、`middle` 左键、右键、中间滚轮
####`@click`的精确修饰符`.exact` **常规点击修饰符 修饰组件，如：** ``` ``` **按住ctrl键 或者 按住ctrl键同时按住其他键，再点击组件，都可以响应回调：** **加上`.exact`之后，只有单独按ctrl键点击组件才响应：** ```
123456
```
####`@scroll.passive`的`.passive`可以提高滚动性能
####按键事件指令`@keydown` **常规的按键回调指令是`@keydown`， 被该指令修饰的组件，只要点击了，就会触发相关的回调方法：** ``` Hello World! heheheheheheda ``` 
####`@keydown`的按键修饰符`.enter` **当`.enter`修饰`按键事件指令`时，对应的组件需要输入`回车键`， 才会触发`按键事件`keydown`回调`：** ``` ``` 效果：
####`@keydown`的按键修饰符`tab`、`delete`、`esc`、`up`、`down`、`left`、`right`等 **意义同理于以上的`.enter`，被修饰的对应的组件需要输入`对应修饰符的键`， 才会触发`按键事件`keydown`回调`；**
