Как правильно передать параметры в функцию-обработчик чтобы потом его можно было удалить?

Question

[sodiqit]

Всем привет! Вопрос состоит в том, как передать параметры в функцию-обработчик, чтобы впоследствии удалить её через removeEventListener?

Сейчас у меня такая ситуация:

const curry = function(i) {
  return (e) => changeCountry(e, i);
}; 
button.addEventListener('click', curry(i));

Но как в данном случае удалить обработчик? Ведь получается, что им является анонимная функция, которую нельзя удалить и она останется висеть.

Comments

[Тигран Абрамян]

Что это?
const curry = return (e) => changeCountry(e, i);
Так правильней
const curry = (e) => changeCountry(e, i);

[sodiqit]

Подправил.

[Роман]

TAbrahamyan, это наноФАБРИКА )))) вопрос лишь зачем она тут нужна?)

[Тигран Абрамян]

Роман, чела подправил

[Роман]

sodiqit, что подправил?

У вас есть хоть какие нибудь причины делать так как вы показали а не так:

const curry = (e) => changeCountry(e);
button.addEventListener('click', curry);

если же вам прямо таки НУЖЕН параметр i, то сделайте так:

const curry = function(i) {
  return (e) => changeCountry(e, i);
}; 
const handler = curry(i);
button.addEventListener('click', handler);

...

button.removeEventListener('click', handler);

[sodiqit]

Роман, Да, мне нужно передать помимо эвента еще и переменную i в функцию-обработчик

[Роман]

sodiqit, смотри выше

[sodiqit]

Отлично, попробую, спасибо

Answer 1

[Дмитрий Беляев]

На моей практике лучшим методом работой с различными EventEmitter/PubSub механизмами - это подписыватель возвращающий отписыватель. То есть некая функция, которая на основе своих аргументов организует подписку и возвращает функцию без аргументов, которая при вызове отменит подписку, отпишет от события и т.д.
Пример из личной библиотеки:

import {curry} from 'ramda';
export const subscribe = curry((target: EventTarget, eventName: string, handler: EventListenerOrEventListenerObject): (() => void) => {
    target.addEventListener(eventName, handler);
    return () => target.removeEventListener(eventName, handler);
});

Если убрать ramda и typescript, то останется такое:

export const subscribe = (target, eventName, handler) => {
    target.addEventListener(eventName, handler);
    return () => target.removeEventListener(eventName, handler);
};

Суть: subscribe при вызове подпишет DOM объект target на событие eventName с функцией handler и вернет функцию без аргументов, которая при вызове отпишет DOM объект target от события eventName для функции handler

В Вашем случае будет так:

const curry = (i) => (e) => changeCountry(e, i);
const unsubscribe = subscribe(button, 'click', curry(i));
// когда подписка больше не нужна, просто вызываем unsubscribe()

Answer 2

[Надим]

Знаете, лично я бы не стал возится с удалением обработчиков, так как это тот ещё геморрой иногда. Лучший вариант, это просто добавить выключатель внутрь запускаемой функции. Например, вот так:

status = 1;
button.addEventListener('click', function() {
    if (status) {
        test();
    }
});

Соответственно, когда обработчик вам больше не нужен, просто меняете переменную status на ноль и целевая функция test уже больше не будет запускаться при срабатывании обработчика.

Answer 3

[Илья Хардкор]

function sum(a, b) {
        console.log(a + b);
    }
    let temp;
    window.addEventListener('scroll', temp = () => sum(3, 4));
    window.removeEventListener('scroll', temp);