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

Question

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

Inline JavaScript will not be executed

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

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

Answer 1

遇到了同样的问题，但引用了一个非常有用的网站，该网站列出了 Javascript 中的事件。在快速搜索 (Ctrl+F) 关键字“check”后，我发现列出了“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 中的代码片段示例

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