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

Question

I have

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

I try to use in second object but doesnt' work. :

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

This and interfaceuser are references the same instance of object. getEventNameFromInput and eventName are in object InterfaceUser

Answer 1

When you call removeEventListener you have to pass the same function .

With your existing code, every time you call eventName , it generates a new arrow function and returns that. An identical function will not do the job. You need the same function.

This means that you need to store the function when you create it, and then retrieve the value from the store next time you need it.

For example:

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

Answer 2

I would suggest to go with custom events as specified here: 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>