添加具有参数的事件监听器到循环中的元素

Question

我想添加事件监听器到循环中的元素，但我努力获取参数传递给匿名函数正确。

这里有我想要的JS应用到HTML的例子：

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

而这里的JS：

// 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

小提琴

https://jsfiddle.net/to4nLz8L/

Answer 1

有一对夫妇的方式来实现这一目标。首先，通过@Tushar的意见（和jFiddle here），它使用使用机箱的正确方法回答：通过@Barmar的答案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)); 
} 

然后是第二种方式，从而改变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脚本的函数。