javascript - 如果回调是参数化箭头函数，如何删除事件侦听器

Question

我有一个场景，我想删除事件侦听器。

    export const addEventToDropDown = (callback) => {
        document.addEventListener("keydown", (event) => {
            if (event.key === "Backspace" && document.activeElement.type === "select-one") {
                event.target.value = "";
                callback(event);
            }
        }, true);

    }


    export const removeEventListner = () => {
        //document.removeEventListener("keydown");
    }

标签： javascriptreactjs

Answer 1

您可以动态创建处理程序并将对它的引用存储在闭包中。这样就可以使用removeEventListener取消注册处理程序

const createKeydownHandler = callback => event => {
    if (event.key === "Backspace" && document.activeElement.type === "select-one") {
        event.target.value = "";
        callback(event);
    }
};

let keydownHandler;

export const addEventToDropDown = (callback) => {
    keydownHandler = createKeydownHandler(callback);
    document.addEventListener("keydown", keydownHandler, true);
}

export const removeEventListner = () => {
    document.removeEventListener("keydown", keydownHandler)
}