在 Chrome 扩展中添加多个事件侦听器

Question

我正在尝试将事件侦听器添加到 chrome 扩展弹出窗口中具有相同 class 的多个元素。事件侦听器由 'click' 触发并打开一个新选项卡。我的 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 循环之外，但什么也没发生。有任何修复吗？

Answer 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")});
})

Answer 2

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

在 Chrome 扩展中添加多个事件侦听器

Adding Multiple Event Listeners in Chrome Extension

javascript

dom

google-chrome-extension

dom-events