大佬教程收集整理的这篇文章主要介绍了当事件仅适用于 bind(this) 时,js 中的 removeEventListener 如何,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我对 .Js 很满意,我的应用程序中没有一些元素需要改进,我无法处理删除事件。
事件是这样添加的:
this.searchBynameElement.addEventListener("keyup",this.searchBynameElementOnKeyUp.bind(this),truE);
但是当我尝试以这种方式将其删除时:
this.searchBynameElement.removeEventListener("keyup",this.searchBynameElementOnKeyUp,truE);
它不起作用。如果我正确理解 .bind(this)
的工作原理,它会创建匿名事件,因此无法删除。
但是当我删除 .bind(this)
时,所有属性 this
的值都为 null 并且方法在此方法中未定义:
searchBynameElementOnKeyUp() {
clearTimeout(this.searchnameTimeout);
// Make a new timeout set to go off in 800ms
this.searchnameTimeout = setTimeout(async () => {
await this.reloadDatabaseItems();
},500);
}
谁能告诉我如何在方法 searchBynameElementOnKeyUp 的 this
中获得值并能够删除事件?
全班:
export class SubelementsDialog extends Dialog {
_this = null;
/**
* Creates a subelements dialog from the specifIEd dialog element.
* @param {HTMLElement} dialogElement Element containing the dialog.
*/
constructor(dialogElement) {
super();
this.dialogElement = dialogElement;
this.type = 0;
this.typename = 0;
/** @type {SubelementsDialogElement[]} */
this.SELEctedItems = [];
/** @type {SubelementsDialogElementbutton[]} */
this.databaseElementsbuttons = [];
/** @type {String[]} */
this.SELEctedPhotos = [];
var databaseElementsContainer = dialogElement.querySELEctor(".set-parts-generate-partial");
if (!(databaseElementsContainer instanceof HTMLElement))
throw "CAnnot find database elements container with class 'set-parts-generate-partial;";
this.databaseElementsContainer = databaseElementsContainer;
var SELEctedElementsContainer = dialogElement.querySELEctor("#set-parts-elements-choosen-table");
if (!(SELEctedElementsContainer instanceof HTMLElement))
throw "CAnnot find database elements container with class 'set-parts-elements-choosen-table'";
this.SELEctedElementsContainer = SELEctedElementsContainer;
var searchBynameElement = dialogElement.querySELEctor(".set-parts-search");
if (!(searchBynameElement instanceof HTMLinputElement))
throw "CAnnot find search input with class 'set-parts-search'";
this.searchBynameElement = searchBynameElement;
this.searchBynameElement.addEventListener("keyup",truE);
const searchByIndexElement = document.querySELEctor(".set-parts-search-index");
if (!(searchByIndexElement instanceof HTMLinputElement))
throw "CAnnot find index input with class 'set-parts-search-index'";
this.searchByIndexElement = searchByIndexElement;
this.searchByIndexElement.addEventListener("keyup",this.searchByIndexElementOnKeyUp.bind(this),truE);
const searchByDevIndexElement = document.querySELEctor(".set-parts-search-devindex");
if (!(searchByDevIndexElement instanceof HTMLinputElement))
throw "CAnnot find devindex input with class 'set-parts-search-devindex'";
this.searchByDevIndexElement = searchByDevIndexElement;
this.searchByDevIndexElement.addEventListener("keyup",this.searchByDevIndexElementOnKeyUp.bind(this),truE);
var exitElement = document.querySELEctor(".set-parts-exit-button");
if (!(exitElement instanceof HTMLElement))
throw "CAnnot find exit element with class 'set-parts-exit-button'";
this.exitElement = exitElement;
this.exitElement.addEventListener("click",this.exitElementOnClick.bind(this),truE);
}
/**
* @param {number} type
*/
setType(typE) {
this.type = 0;
this.type = type;
}
getType() {
return this.type;
}
/**
* @param {SubelementsDialogElement[]} items
*/
setSELEctedItems(items) {
if (!items)
items = [];
this.SELEctedItems = items;
this.SELEctedItemsChanged();
}
getSELEctedItems() {
return this.SELEctedItems;
}
async show() {
await this.reloadDatabaseItems();
this.dialogElement.style.visibility = "visible";
}
close() {
this.dialogElement.style.visibility = "hIDden";
//this.RemoveEvents();
//this.reloadDatabaseItems();
super.close();
}
RemoveEvents() {
this.searchBynameElement.removeEventListener("keyup",truE);
this.searchByIndexElement.removeEventListener("keyup",this.searchByIndexElementOnKeyUp,truE);
this.searchByDevIndexElement.removeEventListener("keyup",this.searchByDevIndexElementOnKeyUp,truE);
}
exitElementOnClick() {
//this.searchBynameElement.value = "";
//this.searchByIndexElement.value = "";
//this.searchByDevIndexElement.value = "";
var typ = types[this.getType()];
if (this.dialogElement.textContent?.includes(typ)) {
this.reloadDatabaseItems();
}
this.close();
}
/**
* @param {SubelementsDialogElement} databaseElement
*/
SELEct(databaseElement) {
var found = this.SELEctedItems.find(el => el.ID == databaseElement.ID);
if (!found) {
if (databaseElement.quantity == null || databaseElement.quantity == 'undefined')
databaseElement.quantity = 1;
this.SELEctedItems.push(databaseElement);
this.SELEctedItemsChanged();
}
}
/**
* @param {SubelementsDialogElement} databaseElement
*/
deSELEct(databaseElement) {
var found = this.SELEctedItems.findindex(el => el.ID == databaseElement.ID);
if (found >= 0) {
this.SELEctedItems.splice(found,1);
this.SELEctedItemsChanged();
}
}
/**
* @param {number} databaseElementID
*/
isSELEcted(databaseElementID) {
return !!this.SELEctedItems.find(el => el.ID == databaseElementID);
}
searchBynameElementOnKeyUp() {
clearTimeout(this.searchnameTimeout);
// Make a new timeout set to go off in 800ms
this.searchnameTimeout = setTimeout(async () => {
await this.reloadDatabaseItems();
},500);
}
searchByDevIndexElementOnKeyUp() {
clearTimeout(this.searchByDevIndexTimeout);
// Make a new timeout set to go off in 800ms
this.searchByDevIndexTimeout = setTimeout(async () => {
await this.reloadDatabaseItems();
},500);
}
searchByIndexElementOnKeyUp() {
clearTimeout(this.searchByIndexTimeout);
// Make a new timeout set to go off in 800ms
this.searchByIndexTimeout = setTimeout(async () => {
await this.reloadDatabaseItems();
},500);
}
SELEctedItemsChanged() {
//...
}
async reloadDatabaseItems() {
//...
}
}
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)
以上是大佬教程为你收集整理的当事件仅适用于 bind(this) 时,js 中的 removeEventListener 如何全部内容,希望文章能够帮你解决当事件仅适用于 bind(this) 时,js 中的 removeEventListener 如何所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。