關(guān)于js中removeEventListener取消事件監(jiān)聽的坑
從addEventListener說起,上代碼
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就沒有參數(shù)了 })
非要讓doSth有參數(shù),可以在函數(shù)外面包上一層函數(shù)
let doSth1=()=>{ doSth(param) } onMounted(() => { window.addEventListener("click", doSth1)//這個(gè)doSth1就是外面包裝的函數(shù) })
以上的原理都適用于removeEventListener,但是emoveEventListener還有一個(gè)注意點(diǎn),見下
onMounted(() => { window.addEventListener("click", () => { doSth() }) }) onUnmounted(() => { window.removeEventListener("click", () => { doSth() }) })
以上這樣的代碼是通不過的,因?yàn)閞emoveEventListener的第二個(gè)參數(shù),也就是那個(gè)回調(diào)函數(shù)必須和addEventListener的回調(diào)函數(shù)是同一個(gè)函數(shù),共享內(nèi)存,下面這種寫法就行得通
onMounted(() => { window.addEventListener("click", doSth) }) onUnmounted(() => { window.removeEventListener("click",doSth) })
然而,上面這種寫法還是不能傳參,所以要傳參的話還是要外包一個(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("沒傳參"); } } onMounted(() => { window.addEventListener("click", doSth) }) onUnmounted(() => { window.removeEventListener("click", doSth) })
這樣的情況則會(huì)提示一則消息:
沒有與此調(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)行是可以的,沒什么問題,但是報(bào)錯(cuò)很難看,解決這個(gè)問題又不想在外面包上一層函數(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- javascript如何刪除所有事件監(jiān)聽器
- JavaScript鼠標(biāo)拖動(dòng)事件監(jiān)聽使用方法以及實(shí)例效果演示
- vue.js綁定事件監(jiān)聽器示例【基于v-on事件綁定】
- vue.js過濾器+ajax實(shí)現(xiàn)事件監(jiān)聽及后臺(tái)php數(shù)據(jù)交互實(shí)例
- vuejs2.0實(shí)現(xiàn)分頁(yè)組件使用$emit進(jìn)行事件監(jiān)聽數(shù)據(jù)傳遞的方法
- javascript 組合按鍵事件監(jiān)聽實(shí)現(xiàn)代碼
- 一文詳解JavaScript的事件監(jiān)聽(最新整理)
相關(guān)文章
JS實(shí)現(xiàn)數(shù)組隨機(jī)排序的三種方法詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript中實(shí)現(xiàn)數(shù)組隨機(jī)排序的三種方式,文中的示例代碼講解詳細(xì),對(duì)我們學(xué)習(xí)或工作有一定參考價(jià)值,需要的可以參考一下2022-05-05javascript實(shí)現(xiàn)簡(jiǎn)單的貪吃蛇游戲
本文很簡(jiǎn)單,給大家分享了一段使用javascript實(shí)現(xiàn)簡(jiǎn)單的貪吃蛇游戲的代碼,算是對(duì)自己學(xué)習(xí)javascript的一次小小的總結(jié),代碼參考了網(wǎng)友的部分內(nèi)容,推薦給大家,希望對(duì)大家能夠有所幫助。2015-03-03原生js實(shí)現(xiàn)trigger方法示例代碼
這篇文章主要給大家介紹了關(guān)于利用原生js實(shí)現(xiàn)trigger方法的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05layui的layer.confirm如何獲取按鈕焦點(diǎn)
因?yàn)閍yer.confirm的按鈕并非采用button,而是a標(biāo)簽,所以獲取按鈕焦點(diǎn)獲取不到,要采用別的方法,下面介紹在ie11中和ie8中不同的寫法,對(duì)layui layer.confirm獲取按鈕焦點(diǎn)相關(guān)知識(shí)感興趣的朋友一起看看吧2023-11-11Javascript操縱Cookie實(shí)現(xiàn)購(gòu)物車程序
Javascript操縱Cookie實(shí)現(xiàn)購(gòu)物車程序...2007-02-02Javascript?Object對(duì)象類型使用詳解
面向?qū)ο缶幊?Object?Oriented?Programming)將現(xiàn)實(shí)世界中的復(fù)雜關(guān)系抽象成一個(gè)個(gè)對(duì)象,通過對(duì)象之間的分工合作對(duì)現(xiàn)實(shí)世界進(jìn)行模擬,這篇文章主要介紹了Javascript?Object對(duì)象類型使用詳解2022-10-10JavaScript數(shù)據(jù)類型轉(zhuǎn)換詳解(推薦)
眾所周知JavaScript是一門弱類型(語言,即變量的類型是不確定的。所以下面這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)據(jù)類型轉(zhuǎn)換的相關(guān)資料,需要的朋友可以參考下2021-05-05用js來定義瀏覽器中一個(gè)左右浮動(dòng)元素相對(duì)于頁(yè)面主體寬度的位置的函數(shù)
用js來定義瀏覽器中一個(gè)左右浮動(dòng)元素相對(duì)于頁(yè)面主體寬度的位置的函數(shù) 函數(shù)的參數(shù):elem元素、頁(yè)面主體寬度(如:990、950寬)、elem與頁(yè)面主體DIV的左邊距2012-01-01