关于js中removeEventListener取消事件监听的坑

关于js中removeEventListener取消事件监听的坑

很多刚接触前端的人都会遇到removeEventListener无法清除监控的情况。下面文章主要介绍removeEventListener取消js中事件监控的坑。通过示例代码介绍的非常详细,有需要的朋友可以参考一下。

从addEventListener开始,编写代码。

onMounted(()={

window.addEventListener(click ,()={

Dosh (param)//param是参数

})

})

AddeventListener有一个箭头函数回调函数,本身不能传递参数(当然Event除外)。如果要传递参数,只能在doSth函数中上传。我们也可以用函数代替箭头函数回调函数,但是这个函数显然不能有参数。

onMounted(()={

Window.addeventlistener (click ,dosh)//这个dosh没有参数。

})

要让doSth有参数,可以在函数外面包装一层函数。

设doSth1=()={

多思(参数)

}

onMounted(()={

Window.addeventlistener (click ,dosh1)//这个dosh 1就是包装在外面的函数。

})

以上原则都适用于removeEventListener,但对于emoveEventListener还有一点需要注意,见下文。

onMounted(()={

window.addEventListener(click ,()={

多斯()

})

})

未安装(()={

window . removeeventlistener( click ,()={

多斯()

})

})

上面的代码是

通不过

,因为removeEventListener的第二个参数,也就是回调函数,必须和addEventListener的回调函数是同一个函数,共享内存,下面写的就行了。

onMounted(()={

window.addEventListener(click ,doSth)

})

未安装(()={

window . removeeventlistener( click ,doSth)

})

但是上面的写法还是不能传参数,所以如果要传参数,还是要外包一个函数,如下

设doSth=(str: string)={

console . log(str);

}

设doSth1=()={

多斯(“哈哈”)

}

onMounted(()={

window.addEventListener(click ,doSth1)

})

未安装(()={

window . removeeventlistener( click ,doSth1)

})

但是,如果使用ts,doSth函数的参数可以是可选参数,如下所示

让doSth=(str?string)={

if (typeof str==string) {

console . log( passed );

}否则{

Console.log(无引用);

}

}

onMounted(()={

window.addEventListener(click ,doSth)

})

未安装(()={

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添加任意类型。

让doSth: any=(str: string)={

if (typeof str==string) {

console . log( passed );

}否则{

Console.log(无引用);

}

}

onMounted(()={

window.addEventListener(click ,doSth)

})

未安装(()={

window . removeeventlistener( click ,doSth)

})

当然,原因还是不明白。唉,慢慢来。

总结

关于removeEventListener在js中取消事件监控的这篇文章到此为止。有关removeEventListener取消事件监视的更多信息,请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们!

关于js中removeEventListener取消事件监听的坑