0


removeEventListener取消事件监听的坑

从addEventListener说起,上代码

onMounted(() => {
    window.addEventListener("click", ()=>{
        doSth(param)//param为参数
    })
})

addEventListener有一个箭头函数回调函数,这个函数本身不能传参(当然event除外),如果你要传参,只能在doSth函数上传,我们也可以将箭头函数回调函数替换成一个函数,但是这个函数明显不能有参数

onMounted(() => {
    window.addEventListener("click", doSth)//这个doSth就没有参数了
})

非要让doSth有参数,可以在函数外面包上一层函数

let doSth1=()=>{
    doSth(param)
}
onMounted(() => {
    window.addEventListener("click", doSth1)//这个doSth1就是外面包装的函数
})

以上的原理都适用于removeEventListener,但是emoveEventListener还有一个注意点,见下

onMounted(() => {
    window.addEventListener("click", () => {
        doSth()
    })
})
onUnmounted(() => {
    window.removeEventListener("click", () => {
        doSth()
    })
})

以上这样的代码是通不过的,因为removeEventListener的第二个参数,也就是那个回调函数必须和addEventListener的回调函数是同一个函数,共享内存,下面这种写法就行得通

onMounted(() => {
    window.addEventListener("click", doSth)
})
onUnmounted(() => {
    window.removeEventListener("click",doSth)
})

然而,上面这种写法还是不能传参,所以要传参的话还是要外包一个函数,如下

let doSth = (str: string) => {
    console.log(str);
}
let doSth1 = () => {
    doSth("haha")
}

onMounted(() => {
    window.addEventListener("click", doSth1)
})
onUnmounted(() => {
    window.removeEventListener("click", doSth1)
})

然而,如果你用ts的话,doSth函数的参数可以是一个可选参数,如下

let doSth = (str?: string) => {
    if (typeof str == "string") {
        console.log("传参了");
    } else {
        console.log("没传参");
    }

}
onMounted(() => {
    window.addEventListener("click", doSth)
})
onUnmounted(() => {
    window.removeEventListener("click", doSth)
})

这样的情况则会提示一则消息:

没有与此调用匹配的重载。
第 1 个重载(共 2 个),“(type: "click", listener: (this: Window, ev: MouseEvent) => any, options?: boolean | AddEventListenerOptions | undefined): void”,出现以下错误。
第 2 个重载(共 2 个),“(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void”,出现以下错误。

当然这样实际运行是可以的,没什么问题,但是报错很难看,解决这个问题又不想在外面包上一层函数,那么可以直接给doSth加上any类型

let doSth: any = (str: string) => {
    if (typeof str == "string") {
        console.log("传参了");
    } else {
        console.log("没传参");
    }

}
onMounted(() => {
    window.addEventListener("click", doSth)
})
onUnmounted(() => {
    window.removeEventListener("click", doSth)
})

当然其中原因还是没能搞懂,唉,慢慢来吧


本文转载自: https://blog.csdn.net/huangfengnt/article/details/125073807
版权归原作者 自己瞎琢磨 所有, 如有侵权,请联系我们删除。

“removeEventListener取消事件监听的坑”的评论:

还没有评论