關(guān)于js中removeEventListener取消事件監(jiān)聽(tīng)的坑

更新時(shí)間：2022年09月01日 14:27:21 作者：huangfengnt

許多入前端不久的人都會(huì)遇到removeEventListener無(wú)法清除監(jiān)聽(tīng)的情況,下面這篇文章主要給大家介紹了關(guān)于js中removeEventListener取消事件監(jiān)聽(tīng)的坑,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

從addEventListener說(shuō)起，上代碼

onMounted(() => {
    window.addEventListener("click", ()=>{
        doSth(param)//param為參數(shù)
    })
})

addEventListener有一個(gè)箭頭函數(shù)回調(diào)函數(shù)，這個(gè)函數(shù)本身不能傳參（當(dāng)然event除外），如果你要傳參，只能在doSth函數(shù)上傳，我們也可以將箭頭函數(shù)回調(diào)函數(shù)替換成一個(gè)函數(shù)，但是這個(gè)函數(shù)明顯不能有參數(shù)

onMounted(() => {
    window.addEventListener("click", doSth)//這個(gè)doSth就沒(méi)有參數(shù)了
})

非要讓doSth有參數(shù)，可以在函數(shù)外面包上一層函數(shù)

let doSth1=()=>{
    doSth(param)
}
onMounted(() => {
    window.addEventListener("click", doSth1)//這個(gè)doSth1就是外面包裝的函數(shù)
})

以上的原理都適用于removeEventListener，但是emoveEventListener還有一個(gè)注意點(diǎn)，見(jiàn)下

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

以上這樣的代碼是通不過(guò)的，因?yàn)閞emoveEventListener的第二個(gè)參數(shù)，也就是那個(gè)回調(diào)函數(shù)必須和addEventListener的回調(diào)函數(shù)是同一個(gè)函數(shù)，共享內(nèi)存，下面這種寫(xiě)法就行得通

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

然而，上面這種寫(xiě)法還是不能傳參，所以要傳參的話還是要外包一個(gè)函數(shù)，如下

let doSth = (str: string) => {
    console.log(str);
}
let doSth1 = () => {
    doSth("haha")
}
 
onMounted(() => {
    window.addEventListener("click", doSth1)
})
onUnmounted(() => {
    window.removeEventListener("click", doSth1)
})

然而，如果你用ts的話，doSth函數(shù)的參數(shù)可以是一個(gè)可選參數(shù)，如下

let doSth = (str?: string) => {
    if (typeof str == "string") {
        console.log("傳參了");
    } else {
        console.log("沒(méi)傳參");
    }
 
}
onMounted(() => {
    window.addEventListener("click", doSth)
})
onUnmounted(() => {
    window.removeEventListener("click", doSth)
})

這樣的情況則會(huì)提示一則消息：

沒(méi)有與此調(diào)用匹配的重載。

第 1 個(gè)重載(共 2 個(gè))，“(type: "click", listener: (this: Window, ev: MouseEvent) => any, options?: boolean | AddEventListenerOptions | undefined): void”，出現(xiàn)以下錯(cuò)誤。

第 2 個(gè)重載(共 2 個(gè))，“(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void”，出現(xiàn)以下錯(cuò)誤。

當(dāng)然這樣實(shí)際運(yùn)行是可以的，沒(méi)什么問(wèn)題，但是報(bào)錯(cuò)很難看，解決這個(gè)問(wèn)題又不想在外面包上一層函數(shù)，那么可以直接給doSth加上any類型

let doSth: any = (str: string) => {
    if (typeof str == "string") {
        console.log("傳參了");
    } else {
        console.log("沒(méi)傳參");
    }
 
}
onMounted(() => {
    window.addEventListener("click", doSth)
})
onUnmounted(() => {
    window.removeEventListener("click", doSth)
})

當(dāng)然其中原因還是沒(méi)能搞懂，唉，慢慢來(lái)吧

總結(jié)

到此這篇關(guān)于js中removeEventListener取消事件監(jiān)聽(tīng)的文章就介紹到這了,更多相關(guān)removeEventListener取消事件監(jiān)聽(tīng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: