动态创建按钮并设置“onclick”处理程序并接受多个参数答案

【问题标题】：Create a button dynamically and set "onclick" handler with accepts multiple arguments动态创建按钮并设置“onclick”处理程序并接受多个参数
【发布时间】：2016-03-07 16:54:49
【问题描述】：

我需要在循环中动态创建一个按钮并将“onclick”事件处理程序附加到它，然后处理程序的函数是预定义的并接受多个参数。

for (var i = 0; .....) {
  var b = document.createElement("BUTTON");
  b.appendChild(document.createTextNode("fdsfdsfd_" + i)); 
  b.onclick = function() {
    var b = getB();
    var c = getC();
    myFunction(i, b, c);
  };

  document.appendChild(b);
}



function myFunction(a, b, c) {

}

但是当我检查 thml 时，没有“onclick”属性。

innerHTML 属性不适合我的情况。

【问题讨论】：

标签： javascript

【解决方案1】：

$('#Delta1').click(function() {
  var functions = ['btn1()', 'btn2()', 'btn3()', 'btn4()', 'btn5()', 'btn6()', 'btn7()', 'btn8()', 'btn9()', 'btn10()'];
  var div = document.getElementById('insertHere');
  var ctr = 1;
  for (var i in functions) {

    var btn = document.createElement('button');
    var txt = document.createTextNode(String(ctr));

    btn.appendChild(txt);
    btn.setAttribute('type', 'button');
    btn.setAttribute('onclick', functions[i]);
    btn.setAttribute('id', 'button' + ctr);
    div.appendChild(btn);
    ctr++;
  }
});

function btn1() {
  alert('button 1');
}

function btn2() {
  alert('button 2');
}

function btn3() {
  alert('button 3');
}

function btn4() {
  alert('button 4');
}

function btn5() {
  alert('button 5');
}

function btn6() {
  alert('button 6');
}

function btn7() {
  alert('button 7');
}

function btn8() {
  alert('button 8');
}

function btn9() {
  alert('button 9');
}

function btn10() {
  alert('button 10');
}

<button type="button" id="Delta1">Blast Off!</button>
<div id="insertHere"></div>

【讨论】：

【解决方案2】：

试试这个

var b = document.createElement("BUTTON");
b.appendChild(document.createTextNode("fdsfdsfd_" + i)); 
b.addEventListener('click', function() {
  console.log('anchor');
});

并且点击事件不需要 onclick 属性来工作

【讨论】：

什么是必要的？。
@Mook 绑定事件对于单击事件起作用是必要的，并且可以通过“addEventListener”或通过 onclick 完成绑定。所以'onclick'并不是设置点击事件的唯一方法。