按钮的onclick事件触发onload

Question

我有一个div，我想在上面附加一个用JS 创建的按钮，用JS 定义ID、onclick 以及文本。一切正常，除了 onclick 事件在页面加载时触发而不是在单击时触发。检查时，甚至没有 onclick 属性。

这是一个例子：

function createEditButton(num) {
 var btn = document.createElement("button");
 btn.onclick = myFunc();
 btn.type = "button";
 btn.innerText = "Edit";
 btn.id = "editbutton" + num;
 return btn;
}

function myFunc() {
    alert("hi");
    
}

document.getElementById('someDiv').appendChild(createEditButton(5));

<div id="someDiv"> </div>

我什至尝试使用 addEventListener: btn.addEventListener("click", showEditFields(event), false); 添加事件，结果相同。我不明白我做错了什么。谢谢

Answer 1

b/c您是在调用函数而不是引用它：

btn.onclick = myFunc(); /* <-- remove parens */

btn.onclick = myFunc;

Answer 2

function createEditButton(num) {
 var btn = document.createElement("button");
 btn.onclick = myFunc;
 btn.type = "button";
 btn.innerText = "Edit";
 btn.id = "editbutton" + num;
 return btn;
}

function myFunc() {
    alert("hi");
    
}

document.getElementById('someDiv').appendChild(createEditButton(5));

<div id="someDiv"> </div>

Answer 3

在将 btn.onclick 注册为点击回调时，您正在执行函数而不是分配它。你应该使用 addEventListener 方法而不是 onclick 来注册点击事件，使用 addEventListener 的好处是它可以很容易地注册多个回调，而如果假设你要分配两次 'onclick' 值第一个值将被替换。

要将值传递给函数，您可以使用 bind 函数。 bind 将创建具有给定上下文和绑定参数的新函数。或者您可以简单地创建一个包装函数，它将使用给定的参数执行回调函数。

Bind: MDN Docs

参见下面的示例。

function createEditButton(num) {
  var btn = document.createElement("button");
  btn.addEventListener('click', myFunc);

  // Using Bind to pass value
  btn.addEventListener('click', myFuncWithVal.bind(btn, num));


  // Uaing Wrapper function to pass value
  btn.addEventListener('click', function(event) {
    alert('wrapper function');
    myFuncWithVal(num);
  });

  btn.type = "button";
  btn.innerText = "Edit";
  btn.id = "editbutton" + num;
  return btn;
}

function myFunc() {
  alert("hi");
}


function myFuncWithVal(val) {
  alert(val);
}

document.getElementById('someDiv').appendChild(createEditButton(5));

<div id="someDiv"></div>

按钮的onclick事件触发onload

Onclick event triggering onload for button

javascript

jquery

html

javascript-events