javascript - 从动态创建的按钮将参数传递给事件监听器

Question

我正在动态创建 3 个按钮。如何将参数传递给handlerX？

所以基本上我希望将类别数组中的值传递给 handlerX eventListener。 例子: 单击 myBtn1 时，我希望警报为“fur_”， 单击 myBtn3 时，我希望警报为“fas_”

var btns = '';
var category = ["fur_", "fts_", "fas_"];
for (i = 1; i < category.length; i++) {
    btns += '<button type="button" class=' + category[i] + ' id= "myBtn' + i + '">.....</button>';
}
var div = document.getElementById('div');
div.innerHTML = btns;

var handlerX = function () {
    alert('Clicked'); //get value from the 'category' Array
};
var buttons = div.querySelectorAll('button');
for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', handlerX, false);
}

Answer 1

到目前为止给出的答案都很好，应该可以解决您的问题。只是想我会添加这个，因为我认为这是一个更符合您要求的解决方案:让您的 handlerX 返回一个像这样的函数:

var handlerX = function (param) {
    return function() {alert(param);};
};
var buttons = div.querySelectorAll('button');
for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', handlerX(category[i]), false);
}

编辑:这是一个Fiddle