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

 当然其中原因还是没能搞懂 
 
 
 
 
 
 
 
 
 
 
 
 
 
，唉





















，慢慢来吧