怪异的 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 方法中也可以使用