Как в addEventListener в функцию передать переменные, если необходимо так же удалять созданный эвент?

Question

[Kerm]

document.body.removeEventListener("paste", handlePasteImage, true);
document.body.addEventListener("paste", handlePasteImage, true);

Мне в handlePasteImage нужно передать переменную, но при этом:

Необходимо чтобы в функцию handlePasteImage передавалось событие (event) + переменные и при этом необходимо еще удалять созданное событие.

Т.е. если я пишу вот так:

document.body.addEventListener("paste", handlePasteImage($var), true);

То у меня теряется эвент.

Такой код:

document.body.addEventListener("paste", handlePasteImage(event, $var), true);

Не работает, такая ошибка появляется:

Uncaught TypeError: Failed to execute 'addEventListener' on 'EventTarget': parameter 2 is not of type 'Object'

И передача event в качестве аргументов функции пишет что Depricated.

Вроде как работает такой код:

document.body.addEventListener("paste", (event) => {
            handlePasteImage(event, parentElement)
        }, true);

Но, мне не совсем понятно если я решу удалить евент paste, такой код удаления сработает?

document.body.removeEventListener("paste", handlePasteImage, true);

Или нужно писать такой же вызов функции как и при добавлении евента? Шторм подсвечивает функцию handlePasteImage с предупреждением:

Argument type function(any, any): boolean is not assignable to parameter type (this:HTMLElement, ev: HTMLElementEventMap[string]) => any

Answer 1

[Ivan Ustûžanin]

если нужно удалить обработчик после однократного срабатывания, есть once в третьем параметре

если логика удаления другая, то есть вариант:

const handler = handlePasteImage.bind(null, whatever);
addEventListener('paste', handler, { capture: true, });

в handlePasteImage() придёт (whatever, event), а удалять нужно handler

или

const handler = {
  whatever: whatever,
  handleEvent(event) {
    handlePasteImage(event, this.whatever);
  },
};
addEventListener('paste', handler, { capture: true, });

в handlePasteImage() придёт (event, whatever), а удалять нужно опять же handler

Answer 2

[VoidVolker]

Например можно сделать обретку или использовать bind:

let handlePasteImage2 = (e) => handlePasteImage(e, $var)
document.body.removeEventListener("paste", handlePasteImage2, true);
document.body.addEventListener("paste", handlePasteImage2, true);

Comments

[Kerm]

Спасибо, выглядит логично, но на сколько я вижу у себя не происходит удаление события

Answer 3

[historydev]