尽管我只点击了一个复选框，为什么会调用复选框的所有点击事件？答案

【问题标题】：Why all click events for checkboxes is called although I clicked only one checkbox?尽管我只点击了一个复选框，为什么会调用复选框的所有点击事件？
【发布时间】：2019-09-12 13:48:33
【问题描述】：

我只选中了一个复选框，但调用了附加到其他复选框的另一个单击侦听器。我不认为这是事件冒泡的典型案例。我该如何解决这个问题？

我已经检查过这是否与事件冒泡有关。但我不这么认为，因为我的输入标签是水平的。

Popup.html

    <!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
      <h3>Input game title to search metacritic score!</h3><br>
      <p>Press the "Enter" key inside the input field to trigger the button.</p>
      <input id="gameTitle" value="Example : &quot;Gears 5&quot;">
      <input type="checkbox" name="Pc" id="pcCheck">PC<br>
      <input type="checkbox" name="Ps4" id="ps4Check">PS4<br>
      <input type="checkbox" name="Xbox" id="xboxCheck">XBOX<br>
      <input type="checkbox" name="Switch" id="switchCheck">SWITCH<br>
      <button id="confirmBtn">Confirm</button>
    <p id = "content"></p>
    <script src="popup.js"></script>
  </body>
</html>

Popup.js

var dict = {};
dict["confirmBtn"] = document.getElementById("confirmBtn");
dict["pcCheck"] = document.getElementById("pcCheck");
dict["ps4Check"] = document.getElementById("ps4Check");
dict["xboxCheck"] = document.getElementById("xboxCheck");
dict["switchCheck"] = document.getElementById("switchCheck");

document.addEventListener('DOMContentLoaded', function() {
 dict["confirmBtn"].addEventListener("click", confirmBtnEvent);
 dict["pcCheck"].addEventListener("click", CheckEvent("pcCheck"),{capture:true});
 dict["ps4Check"].addEventListener("click", CheckEvent("ps4Check"),{capture:true});
 dict["xboxCheck"].addEventListener("click", CheckEvent("xboxCheck"),{capture:true});
 dict["switchCheck"].addEventListener("click", CheckEvent("switchCheck"),{capture:true});
});

我希望在单击相应复选框时调用一个特定的事件侦听器。

【问题讨论】：

addEventListener 第二个参数必须是一个函数，而不是调用函数的结果——除非CheckEvent(.....)返回一个函数……什么是CheckEvent函数？
请注意：您的 <input> 元素不是有效的 HTML，它们会自动关闭
{capture: true} 应该是 addEventListener 的参数，而不是 CheckEvent
dict[x].id 与 x 相同，不是吗？

标签： javascript html google-chrome-extension

【解决方案1】：

您没有正确调用addEventListener。参数应该是函数引用，而不是调用函数的结果。并且选项需要是addEventListener 的参数。

dict["pcCheck"].addEventListener("click", function() {
    CheckEvent("pcCheck");
},{capture:true});

但是，如果你稍微改变CheckEvent，你可以将其简化为：

dict["pcCheck"].addEventListener("click", CheckEvent, {capture:true});

当一个事件监听器被调用时，this被设置为事件的目标，所以你可以在函数内部使用this，而不是使用参数调用document.getElementById()。

【讨论】：

感谢您，问题解决了。但我还有其他问题。那么为什么在之前的代码中调用了复选框的所有点击事件，我在 addEventListener 的第二个参数中传递了值？
写func1(func2(...))的意思是立即调用func2(...)，然后以返回值作为参数调用func1()。所以如果你写addEventListener("click", CheckEvent(...))，它会立即调用CheckEvent(...)，然后调用addEventListener()。