程序问答   发布时间:2022-06-02  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了当事件仅适用于 bind(this) 时,js 中的 removeEventListener 如何大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

如何解决当事件仅适用于 bind(this) 时,js 中的 removeEventListener 如何?

开发过程中遇到当事件仅适用于 bind(this) 时,js 中的 removeEventListener 如何的问题如何解决?下面主要结合日常开发的经验,给出你关于当事件仅适用于 bind(this) 时,js 中的 removeEventListener 如何的解决方法建议,希望对你解决当事件仅适用于 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,请注明来意。