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

Ссылка скопирована
JavaScript
27 февраля 2026 1 ответ 
document.body.removeEventListener("paste", handlePasteImage, true); document.body.addEventListener("paste", handlePasteImage, true);

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($var), true);

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

Такой код:

document.body.addEventListener("paste", handlePasteImage(event, $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'

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

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

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

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

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

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

Дополнительно:

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

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

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

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

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

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

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

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

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

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

snippet

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Андрей PHP Ответ

Для передачи переменных в функцию при использовании метода addEventListener и последующем удалении созданного события, можно воспользоваться следующим подходом:

1. Создайте функцию, которую вы хотите вызвать при срабатывании события. Например:

function myFunction(param1, param2) {
  console.log(param1 + ' ' + param2);
}

function myFunction(param1, param2) { console.log(param1 + ' ' + param2); }

2. Добавьте слушатель события с помощью метода addEventListener, передав в качестве аргументов функцию и необходимые переменные:

var element = document.getElementById('myElement');
var param1 = 'Hello';
var param2 = 'World';
 
element.addEventListener('click', function() {
  myFunction(param1, param2);
});

var element = document.getElementById('myElement'); var param1 = 'Hello'; var param2 = 'World'; element.addEventListener('click', function() { myFunction(param1, param2); });

3. Для удаления созданного события, используйте метод removeEventListener, передав ту же функцию, которая была передана при добавлении слушателя:

element.removeEventListener('click', function() {
  myFunction(param1, param2);
});

element.removeEventListener('click', function() { myFunction(param1, param2); });

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

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

CSS Как реализовать table на основе grid? 1 ответ Веб-разработка Как поправить этот код чтобы можно было обновить данные в бд( при взаимодействии с методом класса в Node.js)? 2 ответов Android Как заменить класс AuthorizationCodeInstalledApp на Android (Google API)? 1 ответ Google Как подтвердить аккаунт Google? 1 ответ