老师，关于 event 的问题请教一下。

Question

<button @click="increment1">+1</button>
<button @click="increment2($event)">+2</button>
<button @click="increment3(3, $event)">+3</button>
<button @click="increment4(4)">+4</button>

increment1(event) {
    // eslint-disable-next-line
    console.log('event1', event, event.__proto__.constructor)
    this.num++
},
increment2(event) {
    // eslint-disable-next-line
    console.log('event2 target', event.target)
},
increment3(val, event) {
    // eslint-disable-next-line
    console.log('event3 target', event.target)
    this.num = this.num + val
},
increment4(val) {
    // eslint-disable-next-line
    console.log('event4 target', event.target)
    this.num = this.num + val
},

请问下。

1. 对比 increment1 和 increment2，调用时无论传参与否，为何都能访问到 event。
2. 对比 increment3 和 increment4，传不传 $event 也都能访问到 event。 $event 有什么用呢。

Answer 1

双越 2022-01-20 18:09:32

第一，如果 template 中直接调用函数，没有传递任何参数，vue 会默认传 event 过去。所以 increment1 有 event

第二，increment4 函数中，event 这个变量都没有被定义，语法上就是不对的，按理说应该会报错。你再确认一下。

• 提问者 ButcherV #1

  老师，回复里不能贴图。我把贴图贴在了问题描述里。关于图片，箭头处等于是已经有了代码提示了，但是实际上 event 是可以正常访问的。

• 提问者 ButcherV #2

  另外老师，关于问题 1，这个是 vue 自动传过去的么？好像在非 vue 的原生环境，关于 event，调用时也是一直可传可不传的状态，一直这块就比较迷惑。类似这样的疑惑：https://www.imooc.com/wenda/detail/344036

• 双越 回复 提问者 ButcherV #3

  哦，感谢你的提示，之前我忽略了一点：event 确实是 window 的全局属性，可以直接访问的但不建议这么用（不常用，所以我也给忽略了）。另外，increment1 里，你可以改一改参数名字，例如改成 myEvent ，然后打印 myEvent 看看，就知道答案了。