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