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