Question

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

所以基本上我希望将类别Array中的值传递给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

Answer 2

编辑：然后我会建议添加一个attibute：data-category =＆＃34; fur _＆＃34;例如，从您的事件处理程序访问：

this.getAttribute('data-category')

在hadlerX中有一个＆＃34;这个＆＃34;这是被点击的元素。你可以访问它的getAttribute（＆＃34; class＆＃34;）来获得编辑类：这个，而不是自我

Answer 3

如果您愿意从class属性中提取它，那么：

var handlerX = function () {
    alert(this.getAttribute('class'));
};

或者您最好将其与某些data-属性相关联。例如：

for (i = 1; i < category.length; i++) {
    btns += '<button type="button" data-category="' + category[i] + '" class=' + category[i] + ' id= "myBtn' + i + '">.....</button>';
}

然后：

var handlerX = function () {
    alert(this.getAttribute('data-category'));
};

请参阅Fiddle

Answer 4

＆＃13;

fatal error: Array index out of range

＆＃13;

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

4 个答案: