關于js中removeEventListener取消事件監(jiān)聽的坑
從addEventListener說起,上代碼
onMounted(() => { window.addEventListener("click", ()=>{ doSth(param)//param為參數(shù) }) })
addEventListener有一個箭頭函數(shù)回調函數(shù),這個函數(shù)本身不能傳參(當然event除外),如果你要傳參,只能在doSth函數(shù)上傳,我們也可以將箭頭函數(shù)回調函數(shù)替換成一個函數(shù),但是這個函數(shù)明顯不能有參數(shù)
onMounted(() => { window.addEventListener("click", doSth)//這個doSth就沒有參數(shù)了 })
非要讓doSth有參數(shù),可以在函數(shù)外面包上一層函數(shù)
let doSth1=()=>{ doSth(param) } onMounted(() => { window.addEventListener("click", doSth1)//這個doSth1就是外面包裝的函數(shù) })
以上的原理都適用于removeEventListener,但是emoveEventListener還有一個注意點,見下
onMounted(() => { window.addEventListener("click", () => { doSth() }) }) onUnmounted(() => { window.removeEventListener("click", () => { doSth() }) })
以上這樣的代碼是通不過的,因為removeEventListener的第二個參數(shù),也就是那個回調函數(shù)必須和addEventListener的回調函數(shù)是同一個函數(shù),共享內存,下面這種寫法就行得通
onMounted(() => { window.addEventListener("click", doSth) }) onUnmounted(() => { window.removeEventListener("click",doSth) })
然而,上面這種寫法還是不能傳參,所以要傳參的話還是要外包一個函數(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ù)可以是一個可選參數(shù),如下
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”,出現(xiàn)以下錯誤。
第 2 個重載(共 2 個),“(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void”,出現(xiàn)以下錯誤。
當然這樣實際運行是可以的,沒什么問題,但是報錯很難看,解決這個問題又不想在外面包上一層函數(shù),那么可以直接給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) })
當然其中原因還是沒能搞懂,唉,慢慢來吧
總結
到此這篇關于js中removeEventListener取消事件監(jiān)聽的文章就介紹到這了,更多相關removeEventListener取消事件監(jiān)聽內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
Javascript操縱Cookie實現(xiàn)購物車程序
Javascript操縱Cookie實現(xiàn)購物車程序...2007-02-02JavaScript數(shù)據(jù)類型轉換詳解(推薦)
眾所周知JavaScript是一門弱類型(語言,即變量的類型是不確定的。所以下面這篇文章主要給大家介紹了關于JavaScript數(shù)據(jù)類型轉換的相關資料,需要的朋友可以參考下2021-05-05用js來定義瀏覽器中一個左右浮動元素相對于頁面主體寬度的位置的函數(shù)
用js來定義瀏覽器中一個左右浮動元素相對于頁面主體寬度的位置的函數(shù) 函數(shù)的參數(shù):elem元素、頁面主體寬度(如:990、950寬)、elem與頁面主體DIV的左邊距2012-01-01