如何在Chrome扩展程序的弹出窗口中添加复选框的事件监听器？

Question

我正在尝试在Chrome扩展程序的弹出窗口中捕获checkbox更改。 文件说 ：

内联JavaScript将不会被执行

在同一页面上提供了一个示例，但它用于button 。 我不知道如何修改它以便捕获chekbox的状态变化。

document.addEventListener('DOMContentLoaded', function () {
      document.querySelector('button').addEventListener('click', clickHandler);
});

Answer 1

有同样的问题，但引用一个非常有用的网站，在Javascript中列出事件。 在对关键字“check”进行快速搜索（Ctrl + F）后，我发现列出的“更改”事件...据称与大多数浏览器兼容。 当然，它确实存在，所以我的假设是，复选框可能存在“更改事件”。 低，看看它只是测试它似乎工作。 这是你的代码修改了一点和事件的链接（ http://help.dottoro.com/larrqqck.php ）：

popup.html中的html示例

    <div class="menu" >
<input type="checkbox" id="showAlert" name="showAlert"/>
<label for="showAlert"><nobr>Show Alert</nobr></label></div>

popup.js中的代码片段示例

document.addEventListener('DOMContentLoaded', function () {
      document.querySelector('#showAlert').addEventListener('change', changeHandler);
});

当然，您需要将其传递给以下函数：

function changeHandler(){
   //Do Something...maybe another function showAlert(), for instance
   if(showAlert.checked){
      //do something
   }
   else{
      //do something else
   }
}

01/06/2018 - 编辑：我只是回头看看这篇文章，看来这可能会被弃用。 因此，您可能希望使用MutationObserver（ https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver ）。

Answer 2

尝试：

document.querySelector('checkbox').addEventListener('CheckboxStateChange', Handler);

或者，您可以收听'onChange'或'onClick'事件，因为每次点击都会更改复选框的状态。