Как я могу передать аргумент в функцию обратного вызова прослушивателя событий, не теряя свойство «событие»?

1

Я понятия не имею, как это сделать, я хочу передать аргумент функции обратного вызова "ctrlDeleteItem":

document.querySelector('. container'). addEventListener ('click', ctrlDeleteItem);

Но если я это сделаю, я потеряю доступ к свойству события, например:

document.querySelector('.container').addEventListener('click', ctrlDeleteItem(item));

function ctrlDeleteItem(item, event) {
  return function() {
    console.log(item);
    console.log(event);
  }
}

Как я могу передать событие в качестве параметра? Я не могу найти, как это сделать, спасибо.

  • 1
    Заказать этот ответ stackoverflow.com/a/11986895/598478
  • 0
    Существует некоторое делегирование событий, поэтому event.target - это не тот элемент, который я выбираю с помощью document.querySelector ('. Container')
Показать ещё 1 комментарий
Теги:
callback
events

2 ответа

1
Лучший ответ

ctrlDeleteItem ответ неверен, потому что это приведет к ctrlDeleteItem функции ctrlDeleteItem. Это можно показать, добавив инструкцию console.log("test") в ctrlDeleteItem() - вы получите сообщение немедленно.

Правильное решение состоит в том, чтобы настроить "обратную" функцию обратного вызова, которая будет принимать событие как обычно, а затем заставить эту оболочку вызвать функцию обратного вызова с любыми аргументами. При необходимости оболочка может передать event фактическому обратному вызову.

const item = 'foo';
document.querySelector('.container').addEventListener('click', function(evt){ 
  ctrlDeleteItem(evt, item);
});

function ctrlDeleteItem(evt, item) {
    console.log(evt.type, item);
    console.log(event.target.className);
}
<div class="container">container</div>
Поделиться
0

Поместите event в качестве аргумента в возвращаемую функцию в ctrlDeleteItem, чтобы он правильно использовался как event в слушателе:

function ctrlDeleteItem(item) {
  return function(event) {
    console.log(item);
    console.log(event);
  }
}


const item = 'foo';
document.querySelector('.container').addEventListener('click', ctrlDeleteItem(item));

function ctrlDeleteItem(item) {
  return function(event) {
    console.log(item);
    console.log(event.target.className);
  }
}
<div class="container">container</div>
Поделиться
  • 0
    Это не правильно. Смотрите мой ответ ниже, почему и правильное решение.
  • 1
    Но из его коды, казалось, он хочет , чтобы вызвать ctrlDeleteItem немедленно. Если вы по сути хотите передать дополнительный аргумент слушателю во время добавления слушателя, использование функции, возвращающей функцию, является хорошим способом для достижения этой цели.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню