获取当前事件源DOM元素

获取当前事件源DOM

今天用Vue3写程序时遇到了一个问题，原代码如下：

<template>
	<div id="toggleCodeButton" @click="toggleCode">
        显示代码
    </div>
</template>

<script lang="ts">
import { onMounted } from 'vue'
export default {
    setup() {
        const toggleCodeButton = <HTMLDivElement>document.querySelector('#toggleCodeButton')
        const toggleCode = onMounted(() => {
            console.log(toggleCodeButton)
        })
        return { toggleCode }
    }
}
</script>

预期的结果是打印出toggleCodeButton这个DOM元素，但是结果返回的是null，

后来发现了问题所在：我虽然log是在挂载完成后，但是获取DOM却是在挂载之前，当然不会有结果，只要将获取DOM元素也放到onMounted()钩子中即可。
即：

<script lang="ts">
import { onMounted } from 'vue'
export default {
    setup() {
        const toggleCode = onMounted(() => {
        const toggleCodeButton = <HTMLDivElement>document.querySelector('#toggleCodeButton')
            console.log(toggleCodeButton)
        })
        return { toggleCode }
    }
}
</script>

本文想要记录的是在查找解决办法的过程中发现的另一种方法，可以获取触发当前事件的DOM，即在调用的方法中传入$event参数，再用e.target获取DOM

代码修改如下：

<template>
	<div id="toggleCodeButton" @click="toggleCode($event)">
        显示代码
    </div>
</template>

<script lang="ts">
export default {
    setup() {
        const toggleCode = (e) => {
            console.log(e.target)
        }
        return { toggleCode }
    }
}
</script>