在 Chrome 扩展中添加多个事件监听器答案

【问题标题】：Adding Multiple Event Listeners in Chrome Extension在 Chrome 扩展中添加多个事件监听器
【发布时间】：2020-11-05 05:36:07
【问题描述】：

我正在尝试将事件侦听器添加到 chrome 扩展弹出窗口中具有相同类的多个元素。事件侦听器通过“单击”触发并打开一个新选项卡。我的 popup.html 文件看起来像这样

...
<li class="listing">List1</li>
<li class="listing">List2</li>
...
<scripts src="popup.js"></script>
...

无论何时单击列表标签，它们都应该打开一个新标签，但这永远不会发生。这是我的 popup.js 文件的样子

function openLink(end){
    const term = end.trim().split(" ").join("+");
    chrome.tabs.create({url:`https://google.com/search?q=${term}`});
}

var inputs = document.getElementsByClassName('listing');
for( var i=0; i<inputs.length; i++){
   document.addEventListener("DOMContentLoaded",function(){
      inputs[i].addEventListener("click", function() { openLink("meep") } );
   })
}

openLink 函数应该可以正常工作，它只是事件侦听器。我也尝试将“DOMContentLoaded”事件侦听器留在 for 循环之外，但什么也没发生。有什么修复吗？

【问题讨论】：

删除带有 DOMContentLoaded 的行及其对应的 })，不需要这样做，因为从 html 的第一个片段判断，当 DOM 准备好时，您的脚本已经运行。

标签： javascript dom google-chrome-extension dom-events

【解决方案1】：

您应该在函数内部运行循环，以收集输入字段并在 dom 加载后添加事件侦听器。

document.addEventListener("DOMContentLoaded",function(){
  const inputs = document.getElementsByClassName('listing');
  for (let i = 0; i < inputs.length; i++){
    inputs[i].addEventListener("click", function() {openLink("meep")});
})

【讨论】：

没有解决任何问题。即使没有 DOMContentLoaded 侦听器，我也可以将事件侦听器添加到单个 Id。看来我可以通过 DevTools 控制台内的 for 循环将事件侦听器添加到类，但不能在 popup.js 中。很奇怪

【解决方案2】：

问题已解决。我必须在创建元素时添加 .onclick 事件，而不是添加事件侦听器。

【讨论】：