Передача аргумента прослушивателю событий из динамически создаваемых кнопок

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

Если вы готовы, чтобы извлечь его из атрибута 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 2

EDIT: то я бы рекомендовал добавив атрибут объявления: данные категория = «fur_», например, и доступ, из обработчика событий:

this.getAttribute('data-category') 

в hadlerX есть «это», то есть элемент, который щелкнул. Вы можете получить доступ к его GetAttribute («класс»), чтобы получить класс EDIT: это, а не сам

Answer 3

ответы, данные до сих пор хороши и должны решить вашу проблему. Просто думал, что я хотел бы добавить эту, потому что я думаю, что это решение в соответствии с тем, что вы просили: Сделайте свою 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); 
} 

Edit: Вот Fiddle

Answer 4

var fragment = document.createDocumentFragment(), 
 
    categories = ["fur_", "fts_", "fas_"], 
 
    btn; 
 

 
function onClickBtn() { 
 
    alert(this.getAttribute("data-category")); 
 
} 
 

 
for (var i = 0; i < categories.length; i++) { 
 
    btn = document.createElement("button"); 
 
    btn.id = "myBtn" + string(i); 
 
    btn.setAttribute("data-category", category[i]); 
 
    btn.addEventListener("click", onClickBtn); 
 
    fragment.appendChild(btn); 
 
} 
 

 
var div = document.getElementById('div'); 
 
div.appendChild(fragment);