Question

我的代码如下，嵌套的EventListener：

<!DOCTYPE html>
<html>
     <div>Message: <input id="box" /></div>
                        <button id="okay">Okay</button>
<form>
     <div id="rows">
         <div>Row 1: <input class="row" id="rowtext[0]" name="row[0]" readonly> <button type="button" id="input[0]" class="activate_row">Activate Row</button></div>
     <div>Row 2: <input class="row" id="rowtext[1]" name="row[1]" readonly> <button type="button" id="input[1]" class="activate_row">Activate Row</button></div>
     <div>Row 3: <input class="row" id="rowtext[2]" name="row[2]" readonly> <button type="button" id="input[2]" class="activate_row">Activate Row</button></div>
     <div>Row 4: <input class="row" id="rowtext[3]" name="row[3]" readonly> <button type="button" id="input[3]" class="activate_row">Activate Row</button></div>
     <div>Row 5: <input class="row" id="rowtext[4]" name="row[4]" readonly> <button type="button" id="input[4]" class="activate_row">Activate Row</button></div>
  </div>
 <div>
    Activated Row (for debugging): <input id="activated" name="activated">
 </div>

</form>
<script>
   var rows = document.getElementsByClassName("row");
   var  activatebuttons= document.getElementsByClassName("activate_row");
   for (var i = 0; i < activatebuttons.length; i++){
       activatebuttons[i].addEventListener('click', function(){
          var idnum = this.id.slice(6,-1);
          var box = document.getElementById("box")
          var rowText = document.getElementById("rowtext[" + idnum + "]");

          document.getElementById("activated").value = idnum;
          box.value = rowText.value;
          document.getElementById("okay").addEventListener('click', function(){
             alert("ID (for debugging): " + idnum);
             rowText.value = box.value;
          });
      });
    }
</script>
</html>

重现问题的步骤：

点击“激活行”按钮激活特定行。
在“消息框”中键入消息
按Okay
邮件应该复制到相应的行

第一次这很好用。但是，每次单击其中一个“激活行”按钮时，无论是相同的还是不同的按钮，它似乎都会向“正常”按钮添加一个额外的事件监听器。这可以通过我用于调试的“警报”看到。

问题是我的邮件被复制到之前已被激活的每一行而不是仅复制到当前激活的行。为什么会发生这种情况，我该怎么做才能解决它？

澄清一下：我想要发生的事情是只将消息复制到已激活的行。不是之前已激活过的所有行。

事件侦听器多次触发并激活所有激活的对象

0 个答案: