Javascript 在具有各种侦听器的for循环中使用addEventListener（）_Javascript_For Loop_Addeventlistener

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

javascript for-loop

Javascript 在具有各种侦听器的for循环中使用addEventListener（）,javascript,for-loop,addeventlistener,Javascript,For Loop,Addeventlistener,我正在尝试使用for循环向许多按钮添加侦听器。每个按钮的相应侦听器由按钮的ID属性指示。按钮ID遵循“按钮-[listenerName]”的形式。我使用querySelectorAll（）获取所有按钮元素的列表，然后迭代该列表，从每个按钮元素的名称中分割出每个侦听器的名称。然后，我将侦听器的名称与addEventListener（）一起使用，试图将该按钮与其侦听器相关联 <!DOCTYPE html> <html> <body> <button id=

我正在尝试使用for循环向许多按钮添加侦听器。每个按钮的相应侦听器由按钮的ID属性指示。按钮ID遵循“按钮-[listenerName]”的形式。我使用

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>


试试1
试试2
试试3
试试4

var选择器=“[id^=按钮]”；
var allButtons=document.queryselectoral（选择器）；
用于（所有按钮中的var按钮）{
var listenerName=button.id.slice（button.id.lastIndexOf（“-”）+1）；
按钮。添加监听器（“单击”，监听器名称）；
}
var listener1=函数（）{
document.getElementById（'demo'）.innerHtml=“1”；
}
var listener2=函数（）{
document.getElementById（'demo'）.innerHtml=“2”；
}
var listener3=函数（）{
document.getElementById（'demo'）.innerHtml=“3”；
}
var listener4=函数（）{
document.getElementById（'demo'）.innerHtml=“4”；
}

不幸的是，它不起作用。怎么回事？谢谢。

您的代码有3个问题：

在for循环中，实际上是将字符串附加为eventlisteners。您需要从已有的字符串访问事件侦听器由于您的EventListener是在全局scopre中声明的，因此您可以使用

窗口

访问它们：

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>


试试1
试试2
试试3
试试4

var listener1=函数（）{
document.getElementById（'demo'）.innerHTML=“1”；
}
var listener2=函数（）{
document.getElementById（'demo'）.innerHTML=“2”；
}
var listener3=函数（）{
document.getElementById（'demo'）.innerHTML=“3”；
}
var listener4=函数（）{
document.getElementById（'demo'）.innerHTML=“4”；
}
var选择器=“[id^=按钮]”；
var allButtons=document.queryselectoral（选择器）；
用于（所有按钮中的var按钮）{
var listenerName=button.id.slice（button.id.lastIndexOf（“-”）+1）；
addEventListener（“单击”，窗口[listenerName]）；
}

您的代码有3个问题：

在for循环中，实际上是将字符串附加为eventlisteners。您需要从已有的字符串访问事件侦听器由于您的EventListener是在全局scopre中声明的，因此您可以使用

窗口

访问它们：

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>


试试1
试试2
试试3
试试4

var listener1=函数（）{
document.getElementById（'demo'）.innerHTML=“1”；
}
var listener2=函数（）{
document.getElementById（'demo'）.innerHTML=“2”；
}
var listener3=函数（）{
document.getElementById（'demo'）.innerHTML=“3”；
}
var listener4=函数（）{
document.getElementById（'demo'）.innerHTML=“4”；
}
var选择器=“[id^=按钮]”；
var allButtons=document.queryselectoral（选择器）；
用于（所有按钮中的var按钮）{
var listenerName=button.id.slice（button.id.lastIndexOf（“-”）+1）；
addEventListener（“单击”，窗口[listenerName]）；
}

您的行

按钮。添加监听器（“单击”，监听器名称）

尝试将名为listenerName的函数添加到click事件中，但由于listenerName是一个变量而不是函数，因此无法工作

您可以使用函数数组使其工作

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

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

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

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

您的行

按钮。addEventListener（“单击”，listenerName）

尝试将名为listenerName的函数添加到click事件中，但由于listenerName是一个变量而不是函数，因此无法工作

您可以使用函数数组使其工作

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

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

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

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

有一种更简单的方法可以做到这一点-只有一个函数可以处理事件：

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;
}

有一种稍微简单一点的方法可以做到这一点-只有一个函数可以处理事件：

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;
}

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

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

或者，你可以像这样改变你的循环，你的代码就可以工作了

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

控制台显示的错误是什么？寻求调试帮助的问题（“为什么此代码不工作？”）必须包括所需的行为、特定的问题或错误以及在问题本身中重现该问题所需的最短代码。没有明确问题陈述的问题对其他读者没有用处。请参阅：如何创建一个最小的、完整的和可验证的示例。您需要通过添加不起作用的细节来完成您的问题。很好。。您添加的不是侦听器函数，而是字符串。。为什么不将它们附加到同一个事件侦听器上呢。当一个按钮被点击时，你可以使用

this.id

来知道点击了哪个按钮。你的控制台显示了什么错误？寻求调试帮助的问题（“为什么这个代码不起作用？”）必须包括所需的行为、特定的问题或错误以及重现i