怪异的 event
在审核组员代码的时候发现了这样的写法:
<template>
...
<el-button @click="delAll"> 删除全部 </el-button>
...
</template>
...
methods: {delAll() {
...
event.stopPropagation(); // 疑惑写法,未见有参数传入}
}
...
一般会使用这些方式:
- 在 template 模板中使用事件修饰符
@click.stop="delAll"
-
delAll(e)
方法定义时加入参数 - 在 template 模板中传入
@click="delAll($event)"
, 然后再方法中接受
这里就产生了疑惑,未定义event
, 未传入参数, 如何可以使用event
? 带着问题进行一番探究
为什么可以直接使用event
经过代码验证, 方法中直接使用 event
确实是可以的, 于是就在想 event
对象是哪里来的, 排除函数参数之后, 真相只有一个: window.event
这里想到了 js 高级程序设计
这本书里面中的段落:
搜索 MDN 文档:
兼容性:
在 Firefox 浏览器做了测试, 现在版本的也是可以使用的
结论
不建议直接使用 event
, 代码可读性不友好, 不是 Vue 内部实现, addEventlistener
方法中也可以使用