怪异的event

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