Как передать аргумент функции слушателя, переданной в addEventListener?

Question

anItem.addEventListener("click", iRespond, false);

проблема в том, что мне нужно передать аргумент iRespond, потому что iRespond должен обрабатывать клики по многим элементам, и мне нужен способ различать элементы.

Как я могу сделать?

Answer 1

Простое закрытие:

var foo = "bar";
e.addEventListener('whee',function(evt){
  iRespond(evt,foo);
},false);

Когда простое замыкание не подходит (потому что вы фиксируете переменную, которая изменяется, например, в цикле), вам нужно создать новое замыкание для этого значения:

foo.addEventListener('bar',(function(jim){
  return function(evt){
    iRespond(evt,jim); // Surprise surprise, jim is available here!
  }
})(someValueToBeNamedJim), false);

Например:

var buttons = document.querySelectorAll('button');
for (var i=buttons.length;i--;)}
  buttons[i].addEventListener('click',(function(j){
    return function(){ alert("You clicked on button #"+j); };
  })(i),false);
}

Вы можете назвать переменную одинаково как внутри, так и снаружи функции без проблем - например, используя i вместо j выше, но вы можете запутаться.

Answer 2

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

anItem.addEventListener("click", function() {
    iRespond(your arg here);
}, false);

Или, во многих случаях, вы можете просто сослаться на this указатель в слушателе событий, чтобы увидеть, из какого объекта вы были вызваны:

anItem.addEventListener("click", iRespond, false);

Затем в iRespond:

function iRespond() {
    // this points to the item that caused the event so you can 
    // determine which one you are processing and then act accordingly
    // For example, this.id is the id of the object
}

Answer 3

Есть много возможностей. № 1 будет создавать закрытие для него. Вы также можете использовать bind(),

Лучшим решением может быть выделение вариантов (для каждого элемента) по target свойство события, которое также передается слушателю. Это станет очень элегантным, когда вы используете только один обработчик для многих элементов, например, добавляя его в <ul> вместо одного на каждого <li> элемент. Затем выберите, что делать, например, по id или атрибутам данных целевого элемента.