如何在第二个参数是闭包的情况下使用 removeEventListener

Question

我有

getEventNameFromInput() {
    this.inputName.addEventListener('keyup', this.eventName())
}
eventName() {
    let eventName = [];
    return (e) => {
        eventName.push(e.target.value)
           
    }
};

我尝试在第二个 object 中使用，但不起作用。 ：

interfaceUser.inputName.removeEventListener('keyup', interfaceUser.eventName())

这和 interfaceuser 是引用 object 的同一实例。 getEventNameFromInput 和 eventName 在 object InterfaceUser

Answer 1

当您调用removeEventListener时，您必须传递相同的 function 。

使用您现有的代码，每次调用eventName时，它都会生成一个新箭头 function 并返回它。 相同的 function 将无法完成这项工作。 您需要相同的 function。

这意味着您需要在创建 function 时对其进行存储，然后在下次需要时从存储中检索该值。

例如：

eventName() {
    if (!this.eventHandler) {
        let eventName = []; 
        this.eventHandler = (e) => {
            eventName.push(e.target.value)
        }
    }
    return this.eventHandler;
};

Answer 2

我建议 go 使用此处指定的自定义事件： https://developer.mozilla.org/en-US/docs/Web/Events/Creating_and_triggering_events

 const form = document.querySelector('form'); const textarea = document.querySelector('textarea'); form.addEventListener('awesome', e => console.log(e.detail.text())); textarea.addEventListener('input', function() { // Create and dispatch/trigger an event on the fly // Note: Optionally, we've also leveraged the "function expression" (instead of the "arrow function expression") so "this" will represent the element this.dispatchEvent(new CustomEvent('awesome', { bubbles: true, detail: { text: () => textarea.value } })) });

 <form> <textarea></textarea> </form>