Добавить прослушиватели событий с параметрами в элементы в цикле

Question

Я пытаюсь добавить прослушиватели событий к элементам цикла, но я борюсь с тем, чтобы параметр правильно передавался анонимной функции.

Вот пример HTML, который я пытаюсь применить JS к:

<button data-messagesend="Hello!">Send Hello</button> 
<button data-messagesend="Goodbye!">Send Goodbye</button> 

И вот ЯШ:

// sendMsg function that will be applied to elements as an event listener 
function sendMsg(msg) { 
    console.log(msg); 
} 

//Get all elements that have the data-sendmessage property 
elts=document.querySelectorAll('[data-messagesend]'); 

//Create global array for messages 
var messages=[]; 

//Loop through elements and add an event listener to call sendMsg with it's massage 
for(i=0;i<elts.length;i++) { 

    //add element data-sendmessage value to messages array 
    messages[i]=elts[i].dataset.messagesend; 

    //add event listener 
    elts[i].addEventListener('click',function(){sendMsg(messages[i]);}.bind(messages[i]),false); 
} 

это //add event listener линия, что я борюсь с

Я также попытался:

elts[i].addEventListener('click',function(){sendMsg(messages[i]);}.bind(messages,i),false); 

и

elts[i].addEventListener('click',(function(msg){sendMsg(msg);})(messages[i]),false); 

Но он просто возвращает undefined при нажатии кнопок.

Любая помощь будет больше: D

Fiddle

https://jsfiddle.net/to4nLz8L/

Answer 1

Есть несколько способов для достижения этой цели. Первым, ответил @Tushar в комментариях (А jFiddle here), который использует правильный способ использования корпуса:

// sendMsg function that will be applied to elements as an event listener 
function sendMsg(msg) { 
    console.log(msg); 
} 

//Get all elements that have the data-sendmessage property 
elts = document.querySelectorAll('[data-messagesend]'); 

//Create global array for messages 
var messages = []; 

//Loop through elements and add an event listener to call sendMsg with it's massage 
for (i = 0; i < elts.length; i++) { 
    (function (i) { 
     //add element data-sendmessage value to messages array 
     messages[i] = elts[i].dataset.messagesend; 
     console.log(messages); 
     //add event listener 
     elts[i].addEventListener('click', function() { 
      sendMsg(messages[i]); 
     }, false); 
    }(i)); 
} 

а затем второй путь, на которые ссылается @Barmar для ответа here, который изменяет sendMsg функции для получения набора данных информации:

// sendMsg function that will be applied to elements as an event listener 
function sendMsg(msg) { 
    msg=this.dataset.messagesend||msg; 
    console.log(msg); 
} 

//Get all elements that have the data-sendmessage property 
elts=document.querySelectorAll('[data-messagesend]'); 

//Loop through elements and add an event listener to call sendMsg 
for(i=0;i<elts.length;i++) { 
    elts[i].addEventListener('click',sendMsg,false); 
} 

причины у меня есть предпочтения первого решения, является то, что функция sendMsg должна быть изменено во втором растворе. Это было бы невозможно во всех ситуациях, таких как использование функции из внешнего js-скрипта.