解決removeEventListener 無法清除監(jiān)聽的問題
1. 原因
許多入前端不久的人都會(huì)遇到 removeEventListener 無法清除監(jiān)聽的情況，這是由于
要移除事件句柄，addEventListener() 的執(zhí)行函數(shù)必須使用外部函數(shù)，如上實(shí)例所示 (myFunction)。
匿名函數(shù)，類似 “document.removeEventListener(“event”, function(){ myScript });” 該事件是無法移除的。
而在很多情況下我們需要句柄回調(diào)的傳參，又需要其他傳參時(shí)免不了使用句柄，這個(gè)時(shí)候我們需要寫一個(gè)方法去替代這個(gè)回調(diào)，以下是解決方式，寫了一個(gè)addListener 函數(shù)在 addEventListener 之后返回它的銷毀方法
2.解決方式
function isFn(value) {
const type = Object.prototype.toString.call(value);
return type === '[object Function]';
}
function isNode(value) {
return value !== undefined && value instanceof HTMLElement && value.nodeType === 1;
}
function listenNode(node, type, callback) {
node.addEventListener(type, callback);
return {
destroy() {
node.removeEventListener(type, callback);
},
};
}
function addListener(target, type, callback) {
if (!target && !type && !callback) {
throw new Error('缺少參數(shù)');
}
if (!isFn(callback)) {
throw new TypeError('Third argument must be a Function');
}
if (isNode(target)) {
return listenNode(target, type, callback);
}
throw new TypeError('First argument must be a String, HTMLElement, HTMLCollection, or NodeList');
}
function listenNodeList(nodeList, type, callback) {
Array.prototype.forEach.call(nodeList, node => {
node.addEventListener(type, callback);
});
return {
destroy() {
Array.prototype.forEach.call(nodeList, node => {
node.removeEventListener(type, callback);
});
},
};
}
module.exports = listener;
補(bǔ)充知識(shí)：vue 創(chuàng)建監(jiān)聽,和銷毀監(jiān)聽(addEventListener, removeEventListener)
最近在做一個(gè)有關(guān)監(jiān)聽scroll的功能, 發(fā)現(xiàn)我添加監(jiān)聽之后一直不起作用:
mounted() {
window.addEventListener("scroll", this.setHeadPosition); //this.setHeadPosition方法名
后來發(fā)現(xiàn)要在后面添加一個(gè)true之后才行:
mounted() {
window.addEventListener("scroll", this.setHeadPosition, true);
},
而在離開是的時(shí)候需要銷毀監(jiān)聽: (在destroyed里面銷毀), 否則監(jiān)聽會(huì)一直存在, 因?yàn)檫@是單頁面應(yīng)用, 頁面并未關(guān)閉.
destroyed() {
window.removeEventListener("scroll", this.setHeadPosition, true);
},
在銷毀的時(shí)候一定也要加上true, 否則銷毀不起作用.
以上這篇解決removeEventListener 無法清除監(jiān)聽的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue結(jié)合路由配置遞歸實(shí)現(xiàn)菜單欄功能
這篇文章主要介紹了Vue結(jié)合路由配置遞歸實(shí)現(xiàn)菜單欄,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)火鍋工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06
vue實(shí)現(xiàn)某元素吸頂或固定位置顯示（監(jiān)聽滾動(dòng)事件）
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)某元素吸頂或固定位置顯示，監(jiān)聽滾動(dòng)事件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-12-12
vue 實(shí)現(xiàn)v-for循環(huán)回來的數(shù)據(jù)動(dòng)態(tài)綁定id
今天小編就為大家分享一篇vue 實(shí)現(xiàn)v-for循環(huán)回來的數(shù)據(jù)動(dòng)態(tài)綁定id，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue實(shí)現(xiàn)訂單支付倒計(jì)時(shí)功能
這篇文章主要給大家介紹了Vue實(shí)現(xiàn)訂單支付倒計(jì)時(shí)功能,倒計(jì)時(shí)這要運(yùn)用在創(chuàng)建訂單后15分鐘內(nèi)進(jìn)行支付,否則訂單取消,本文結(jié)合示例代碼給大家詳細(xì)講解,需要的朋友可以參考下2023-08-08
vue3+element?plus實(shí)現(xiàn)側(cè)邊欄過程
這篇文章主要介紹了vue3+element?plus實(shí)現(xiàn)側(cè)邊欄過程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue3中如何使用iframe嵌入vue2頁面問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue2.0 datepicker的使用方法，非常不錯(cuò)，具有參考借鑒借鑒價(jià)值，需要的朋友參考下2018-02-02
Vue.js是一種流行的JavaScript框架,用于構(gòu)建交互式的Web應(yīng)用程序,在Vue.js中,我們可以通過動(dòng)態(tài)地增加和刪除組件來實(shí)現(xiàn)動(dòng)態(tài)頁面的構(gòu)建和更新,本文介紹Vue?刪除和增加自定義組件實(shí)戰(zhàn)教程,感興趣的朋友一起看看吧2024-08-08
這篇文章主要為大家詳細(xì)介紹了基于VueJs框架的翻頁組件，小巧精致，性能優(yōu)異的MVVM框架實(shí)現(xiàn)翻頁組件，也適用于angular，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
vue項(xiàng)目如何使用$router.go(-1)返回時(shí)刷新原來的界面
這篇文章主要介紹了vue項(xiàng)目如何使用$router.go(-1)返回時(shí)刷新原來的界面問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09