如何在 Chrome 扩展的弹出窗口中为复选框添加事件侦听器？答案

【问题标题】：How to add event listener for checkbox in Chrome extension's popup?如何在 Chrome 扩展的弹出窗口中为复选框添加事件侦听器？
【发布时间】：2018-01-06 14:00:04
【问题描述】：

我正在尝试在我的 Chrome 扩展程序的弹出窗口中捕获 checkbox 的更改。文档says:

内联 JavaScript 不会被执行

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

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

【问题讨论】：

标签： javascript checkbox google-chrome-extension

【解决方案1】：

遇到了同样的问题，但参考了一个非常有用的网站，该网站列出了 Javascript 中的事件。在对关键字“check”进行快速搜索（Ctrl+F）后，我发现列出了“change”事件……据说与大多数浏览器兼容。果然它在那里，所以我的假设是复选框可能有一个“更改事件”。低，看看只是测试它，它似乎工作。这是您的代码稍作修改和事件链接（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 中的代码 sn-p 示例

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)。

【讨论】：

我可能会使用这个changeHandler：function changeHandler(e){ if(e.target.checked){ alert("Checked"); } else{ alert("Not checked"); } }

【解决方案2】：

试试：

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

或者，您可以监听“onChange”或“onClick”事件，因为每次点击都会改变复选框的状态。

【讨论】：

不，它不起作用。我在DOM event reference 中找不到CheckboxStateChange 事件。
@Roman 或者您可以使用 'onChange' 或 'onClick' 代替。查看更新的答案。
CheckboxStateChange 仅受 Firefox 支持。
@ThinkingStiff 只是为了详细说明它似乎是一个 XUL 事件，它很快甚至不会被 Firefox 支持，因为它们包含 chrome API 扩展。