Javascript 如何在 Chrome 扩展程序的弹出窗口中为复选框添加事件侦听器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11552125/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add event listener for checkbox in Chrome extension's popup?
提问by Roman
I'm trying to capture changes of checkboxin popup of my Chrome Extension. Documentation says:
我正在尝试捕获checkboxChrome 扩展程序弹出窗口中的更改。文档说：
Inline JavaScript will not be executed
内联 JavaScript 不会被执行
There is an example provided on the same page, but it for button. I don't know how to modify it so it would capture chekbox's state changes.
同一页面上提供了一个示例，但它用于button. 我不知道如何修改它以便捕获 chekbox 的状态变化。
document.addEventListener('DOMContentLoaded', function () {
document.querySelector('button').addEventListener('click', clickHandler);
});
回答by Richard Chassereau
Had the same problem but reference a very helpful site which list events in Javascript. After doing a quick search (Ctrl+F) for the keyword "check" I found the "change" event listed...supposedly compatible with most browsers. Sure enought it was there, so my assumption is that maybe there is a "change event" for checkboxes. Low and behold just test it and it seems to work. Here is your code revised a little and the link of events (http://help.dottoro.com/larrqqck.php):
有同样的问题，但参考了一个非常有用的网站，其中列出了 Javascript 中的事件。在对关键字“检查”进行快速搜索 (Ctrl+F) 后，我发现列出了“更改”事件……据说与大多数浏览器兼容。果然它就在那里，所以我的假设是复选框可能有一个“更改事件”。低，看哪只是测试它，它似乎工作。这是您稍微修改的代码和事件链接（http://help.dottoro.com/larrqqck.php）：
Example of html from popup.html
popup.html 中的 html 示例
<div class="menu" >
<input type="checkbox" id="showAlert" name="showAlert"/>
<label for="showAlert"><nobr>Show Alert</nobr></label></div>
Example of code snippet from popup.js
popup.js 中的代码片段示例
document.addEventListener('DOMContentLoaded', function () {
document.querySelector('#showAlert').addEventListener('change', changeHandler);
});
Of course you will need to pass this into a function like:
当然，您需要将其传递给如下函数：
function changeHandler(){
//Do Something...maybe another function showAlert(), for instance
if(showAlert.checked){
//do something
}
else{
//do something else
}
}
01/06/2018 - EDIT:I just glanced back at this article and it appears this is likely going to become deprecated. Hence forward you may wish to use the MutationObserver (https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).
01/06/2018 - 编辑：我刚刚回顾了这篇文章，看来这可能会被弃用。因此，您可能希望使用 MutationObserver ( https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver)。
回答by chaohuang
Try:
尝试：
document.querySelector('checkbox').addEventListener('CheckboxStateChange', Handler);
Alternatively, you can listen to the 'onChange' or 'onClick' events, since every click will change the status of the checkbox.
或者，您可以收听 'onChange' 或 'onClick' 事件，因为每次点击都会改变复选框的状态。
