欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2022年09月01日 14:27:21   作者:huangfengnt  
許多入前端不久的人都會遇到removeEventListener無法清除監(jiān)聽的情況,下面這篇文章主要給大家介紹了關(guān)于js中removeEventListener取消事件監(jiān)聽的坑,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下

從addEventListener說起,上代碼

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

addEventListener有一個箭頭函數(shù)回調(diào)函數(shù),這個函數(shù)本身不能傳參(當(dāng)然event除外),如果你要傳參,只能在doSth函數(shù)上傳,我們也可以將箭頭函數(shù)回調(diào)函數(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ù),也就是那個回調(diào)函數(shù)必須和addEventListener的回調(diào)函數(shù)是同一個函數(shù),共享內(nèi)存,下面這種寫法就行得通

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)
})

這樣的情況則會提示一則消息:

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

  第 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)以下錯誤。

當(dāng)然這樣實際運行是可以的,沒什么問題,但是報錯很難看,解決這個問題又不想在外面包上一層函數(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)
})

 當(dāng)然其中原因還是沒能搞懂,唉,慢慢來吧

總結(jié)

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

相關(guān)文章

  • JS實現(xiàn)數(shù)組隨機排序的三種方法詳解

    JS實現(xiàn)數(shù)組隨機排序的三種方法詳解

    這篇文章主要為大家詳細(xì)介紹了JavaScript中實現(xiàn)數(shù)組隨機排序的三種方式,文中的示例代碼講解詳細(xì),對我們學(xué)習(xí)或工作有一定參考價值,需要的可以參考一下
    2022-05-05
  • javascript實現(xiàn)簡單的貪吃蛇游戲

    javascript實現(xiàn)簡單的貪吃蛇游戲

    本文很簡單,給大家分享了一段使用javascript實現(xiàn)簡單的貪吃蛇游戲的代碼,算是對自己學(xué)習(xí)javascript的一次小小的總結(jié),代碼參考了網(wǎng)友的部分內(nèi)容,推薦給大家,希望對大家能夠有所幫助。
    2015-03-03
  • 原生js實現(xiàn)trigger方法示例代碼

    原生js實現(xiàn)trigger方法示例代碼

    這篇文章主要給大家介紹了關(guān)于利用原生js實現(xiàn)trigger方法的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-05-05
  • layui的layer.confirm如何獲取按鈕焦點

    layui的layer.confirm如何獲取按鈕焦點

    因為ayer.confirm的按鈕并非采用button,而是a標(biāo)簽,所以獲取按鈕焦點獲取不到,要采用別的方法,下面介紹在ie11中和ie8中不同的寫法,對layui layer.confirm獲取按鈕焦點相關(guān)知識感興趣的朋友一起看看吧
    2023-11-11
  • JS實現(xiàn)局部選擇打印和局部不選擇打印

    JS實現(xiàn)局部選擇打印和局部不選擇打印

    這篇文章主要介紹了JS選擇打印內(nèi)容,主要是把自己要打印的東西用一個DIV層抱起來,需要的朋友可以參考下
    2014-04-04
  • Javascript操縱Cookie實現(xiàn)購物車程序

    Javascript操縱Cookie實現(xiàn)購物車程序

    Javascript操縱Cookie實現(xiàn)購物車程序...
    2007-02-02
  • Javascript?Object對象類型使用詳解

    Javascript?Object對象類型使用詳解

    面向?qū)ο缶幊?Object?Oriented?Programming)將現(xiàn)實世界中的復(fù)雜關(guān)系抽象成一個個對象,通過對象之間的分工合作對現(xiàn)實世界進(jìn)行模擬,這篇文章主要介紹了Javascript?Object對象類型使用詳解
    2022-10-10
  • IE8 chrome中table隔行換色解決辦法

    IE8 chrome中table隔行換色解決辦法

    今天把項目生成好后,發(fā)布到萬維網(wǎng)上進(jìn)行測試,發(fā)現(xiàn)table的隔行換色在IE8,chorem中不能正常顯示。找了許多資料,CSS看樣是不能解決,只能用JS來控制了
    2010-07-07
  • JavaScript數(shù)據(jù)類型轉(zhuǎn)換詳解(推薦)

    JavaScript數(shù)據(jù)類型轉(zhuǎn)換詳解(推薦)

    眾所周知JavaScript是一門弱類型(語言,即變量的類型是不確定的。所以下面這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)據(jù)類型轉(zhuǎn)換的相關(guān)資料,需要的朋友可以參考下
    2021-05-05
  • 用js來定義瀏覽器中一個左右浮動元素相對于頁面主體寬度的位置的函數(shù)

    用js來定義瀏覽器中一個左右浮動元素相對于頁面主體寬度的位置的函數(shù)

    用js來定義瀏覽器中一個左右浮動元素相對于頁面主體寬度的位置的函數(shù) 函數(shù)的參數(shù):elem元素、頁面主體寬度(如:990、950寬)、elem與頁面主體DIV的左邊距
    2012-01-01

最新評論