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");
    }

Answer 1

只有引用了事件侦听器，您才能删除它。

由于您直接将箭头函数传递给addEventListener（例如，没有将其存储在变量中，然后在对addEventListener的调用中使用该变量），您就没有了对此的引用。

因此：您不能。

Answer 2

您可以动态创建处理程序，并将其引用存储在闭包中。这样，可以使用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)
}

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

2 个答案: