Question

我在页面上有一些声明，它将点击侦听器应用于使用ID标识的特定元素。将这些组合成一个陈述的最有效方法是什么？

document.getElementById("foo1").addEventListener("click", function(){doSomething('bar1')});
document.getElementById("foo2").addEventListener("click", function(){doSomething('bar2')});
document.getElementById("foo3").addEventListener("click", function(){doSomething('bar3')});

Answer 1

您可以编写一个包含事件侦听器的id和回调的包装器，并执行以下操作：

function addListenerToId(elemId, cb) {
    document.getElementById(elemId).addEventListener("click", cb);
}

然后：

addListenerToId('foo1', cb1);
addListenerToId('foo2', cb2);
addListenerToId('foo3', cb3);

Answer 2

由于“foo”和“bar”是相同的，所有改变的是数字，我们可以把它放在for循环中！

for(var i=1;i<=3;i++){
document.getElementById("foo"+i).addEventListener("click", function()
{doSomething('bar'+i)});
}

如果您不能只使用I作为数字，可以先使用.toString（）方法将其设为字符串。希望这有帮助！

Answer 3

制作一个从1到最大数字迭代的for循环，当你使用id时，只需将i添加到foo或bar：

for(let i = 1; i <= 3; i++)
{
    document.getElementById("foo" + i).addEventListener("click", function(){doSomething('bar' + id)});
}

此外，如果您只需要选择ID为foo的所有元素，例如您可以使用：

document.querySelectorAll("[id^='foo']").forEach((e) => {  
  e.addEventListener('click', doSomething);
});

Answer 4

您可以使用data-attributes存储文本并将click事件绑定到每个元素。

这是使用a元素的示例。

function doSomething(e) {
  e.preventDefault();
  console.log(this.dataset.text);
};

document.querySelectorAll('a').forEach((e) => {  
  e.addEventListener('click', doSomething);
});

<a href="#" id="foo1" data-text="bar1">Foo1</a>
<a href="#" id="foo2" data-text="bar2">Foo2</a>
<a href="#" id="foo3" data-text="bar3">Foo3</a>

将多个getElementById语句合并为一个

4 个答案: