добавить OnClick события динамически создавать элемент

Question

Я хотел бы создать список дивы, один из див хотел это:

<div onclick="myFunc(this, 'arrayValue')"></div> 

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

for(var i = 0; i < array.length; i++){ 
    var div = document.createElement("div"); 
    div.setAttribute("onclick", 'myFunc(this, \''+array[i]+'\')'); 
    myDiv.appendChild(div); 
    } 

Единственная проблема заключается в том, что эта часть выглядит очень некрасиво: \''+array[i]+'\')' Есть другой способ для достижения этой цели? Это будет выглядеть так или что-то подобное:

div.setAttribute("onclick", myFunc(this, array[i]); 

---

кстати. другие решения: когда я использовал div.onclick, onclick attr не был виден на div (результат: <div></div>), возможно, я сделал что-то не так.

Answer 1

var array = ['bla1','bla2']; 
 

 
var myFunc = function(value) { 
 
    alert('click : '+ value); 
 
}; 
 

 
var myDiv = document.getElementById('myDiv'); 
 

 
for(var i = 0; i < array.length; i++){ 
 
    var div = document.createElement("div"); 
 
    div.className = 'bla'; 
 
    myDiv.appendChild(div); 
 
    
 
    div.addEventListener('click', myFunc.bind(this, array[i])); 
 
}

.bla { 
 
    border: 1px solid black; 
 
    width: 20px; 
 
    height: 20px; 
 
    margin: 10px; 
 
    }

<div id="myDiv"></div>

что вы хотите?