Question

我有一个 html 页面，上面有很多按钮，所有按钮都有不同的 onclick 事件。为了让编码更容易，我写了一个按钮生成函数

function createInputButton(value, onclick) {
    var element = document.createElement("input");
    element.type = "button";
    element.value = value; 
    element.onclick = onclick;
    return element;
}

为了测试它，我在另一个函数中调用了它

function makeSomeButtons() {
    var div = document.getElementById("testDiv");
    var testButton1 = createInputButton("Button 1", function(){alert("test 1")});
    var testButton2 = createInputButton("Button 2", function(){alert("test 2")});
    div.appendChild(testButton1);
    div.appendChild(testButton2);
}

按钮出现，一切看起来都不错。但是，似乎 onclick 事件 alert("test 2") 被附加到 html 页面上的每个按钮（即使不是由 createInputButton 生成的按钮！）。

当我单击任何按钮时，我首先收到带有文本“test 2”的警报，然后按钮按预期运行其 onclick 事件。当单击按钮 2 时，我首先收到“测试 2”警报，然后是另一个警报。更奇怪的是，当我点击按钮 1 时，我首先收到“测试 1”警报，然后然后“测试 2”警报。

怎么回事？

按钮 onclick 事件附加到所有按钮

0 个答案: