Question

我尝试使用for循环向多个按钮添加侦听器。每个按钮的相应侦听器由按钮的ID属性指示。按钮ID遵循表格＆＃34; button- [listenerName]＆＃34;。我使用querySelectorAll()获取所有按钮元素的列表，然后迭代该列表，从每个按钮元素的名称中切出每个侦听器的名称。然后，我使用addEventListener()的监听器名称来尝试将该按钮与其监听器相关联。

<!DOCTYPE html>
<html>
<body>

<button id="button-listener1">Try 1</button>
<button id="button-listener2">Try 2</button>
<button id="button-listener3">Try 3</button>
<button id="button-listener4">Try 4</button>

<p id="demo"></p>

<script>

var selector = "[id^=button]";
var allButtons = document.querySelectorAll(selector);
for (var button of allButtons) {
  var listenerName = button.id.slice(button.id.lastIndexOf("-")+1);
  button.addEventListener("click", listenerName);
}

var listener1 = function() {
  document.getElementById('demo').innerHtml = "1";
}

var listener2 = function() {
  document.getElementById('demo').innerHtml = "2";
}

var listener3 = function() {
  document.getElementById('demo').innerHtml = "3";
}

var listener4 = function() {
  document.getElementById('demo').innerHtml = "4";
}

</script>

</body>
</html>

不幸的是，它不起作用。那是什么？谢谢。

Answer 1

您的代码有3个问题：

在for循环中，您实际上是将字符串附加为eventlisteners。您需要从您拥有的字符串访问您的事件侦听器。

由于eventlisteners是在全局范围内声明的，因此您可以使用window来访问它们：

button.addEventListener("click", window[listenerName]);

您在声明事件侦听器之前附加事件侦听器。您需要在for循环

listener1

innerHtml不存在。正确的语法是innerHTML

这是一个有效的例子：

<!DOCTYPE html>
<html>
<body>

<button id="button-listener1">Try 1</button>
<button id="button-listener2">Try 2</button>
<button id="button-listener3">Try 3</button>
<button id="button-listener4">Try 4</button>

<p id="demo"></p>

<script>

var listener1 = function() {
  document.getElementById('demo').innerHTML = "1";
}


var listener2 = function() {
  document.getElementById('demo').innerHTML = "2";
}

var listener3 = function() {
  document.getElementById('demo').innerHTML = "3";
}

var listener4 = function() {
  document.getElementById('demo').innerHTML = "4";
}

var selector = "[id^=button]";
var allButtons = document.querySelectorAll(selector);
for (var button of allButtons) {
  var listenerName = button.id.slice(button.id.lastIndexOf("-")+1);
  button.addEventListener("click", window[listenerName]);
}
</script>

</body>
</html>

Answer 2

您的行button.addEventListener("click", listenerName);尝试向click事件添加一个名为listenerName的函数，并且由于listenerName是一个变量而不是一个函数，因此它不起作用。

你可以使用一个函数数组来使它工作。

var array_of_functions = [
    'listener1' : listener1,
    'listener2' : listener2,
    'listener3' : listener3,
    'listener4' : listener4
]

然后在你的循环中你可以通过提供正确的函数来创建监听器：

button.addEventListener("click", array_of_functions[listenerName]);

此外，请确保在运行循环之前创建函数和数组，否则它们在代码运行时仍然不存在。

Answer 3

有一种稍微简单的方法 - 只需要一个函数来处理事件：

for (var button of allButtons) {
  button.addEventListener("click", handleClick, false);
}

function handleClick() {
  var id = this.id.match(/button-listener(\d)/)[1];
  document.getElementById('demo').innerHTML = id;
}

<强> DEMO

Answer 4

或者，您可以像这样更改循环，并且您的代码可以正常工作

allButtons.forEach(function (button, i) {
    var listenerName = button.id.slice(button.id.lastIndexOf("-") + 1);
    button.addEventListener("click", function () {
    document.getElementById('demo').innerHTML = i + 1;
  });
});

在带有各种侦听器的for循环中使用addEventListener（）

4 个答案: