为带变量的函数动态添加事件侦听器

dynamically add event listener for function with variable

本文关键字：添加 事件 侦听器 动态 函数 变量      更新时间：2023-09-26

我正在尝试创建一个选项来向我的网站添加其他复选框/文本字段。 我有一个按钮"+"链接到一个函数，该函数创建按数字顺序命名的字段。 我想在复选框中添加一个事件侦听器，该复选框将根据调用它的复选框的名称调用需要唯一变量的函数。

<div id="container">
    <input name="+" type="button" id="+" onclick="addInput()" value="+" label="+" />
</div>
<p id=demo>eeeeeeee</p>

var countBox = 1;
function addInput () {
    var breakNode = document.createElement("br");
    breakNode.className = countBox.toString();
    //create checkbox
    var checkbox = document.createElement("input");
    checkbox.type = "checkbox";
    checkbox.value = "ProgramSpecificBox" + countBox.toString();
    checkbox.name = "ProgramSpecificBox" + countBox.toString();
    checkbox.id = "ProgramSpecificBox" + countBox.toString();
    //create Amount
    var Amount = document.createElement("input");
    Amount.type = "number";
    Amount.value = countBox.toString();
    Amount.name = "ItemCostVis"+ countBox.toString();
    Amount.id = "ItemCostVis" + countBox.toString();
    var container = document.getElementById('container');
    container.appendChild(breakNode);
    container.appendChild(checkbox);
    container.appendChild(Amount);
    checkbox.addEventListener("click", function () {
        testthis(NEED CODE HERE);
    })
    countBox += 1;
}
function testthis (text) {
    document.getElementById("demo").innerHTML = text;
}

我应该放什么而不是"这里需要代码"来获得与调用函数的复选框的 id 相同的内容？

而不是：

checkbox.addEventListener("click", function()
{testthis(NEED CODE HERE);
})
countBox += 1;
}

尝试：

checkbox.addEventListener("click", function(e)
    {testthis(e);
    })
countBox += 1;
}

e 参数应该是事件对象。事件对象具有一个属性 currentTarget，该属性引用初始化事件的元素。因此，您可以调用：

function testthis(e)
{
    var myvar = e.currentTarget.id;
}

有关示例，请参阅此小提琴。

你可以尝试这样的事情：

checkbox.onclick = function(me){window.alert(me.id)};
相关文章：