如何在Chrome扩展程序的弹出窗口中为checkbox添加事件监听器？ [英] How to add event listener for checkbox in Chrome extension's popup?

问题描述

我要在我的Chrome扩充功能的弹出式视窗中捕获核取方块的变更。文档） ）：

来自popup.html的html示例

  div class =menu> 
< input type =checkboxid =showAlertname =showAlert/> 
< label for =showAlert>< nobr>显示快讯< / nobr>< / label>< / div& 
 

来自popup.js的代码片段示例

  document.addEventListener（'DOMContentLoaded'，function（）{
 document.querySelector（'＃showAlert'）。addEventListener（'change'，changeHandler）; 
 }）; 
  

当然，你需要将这个函数传递给一个函数：

function changeHandler（）{
// Do Something ...也许是另一个函数showAlert（），例如
if（showAlert.checked ）{
// do something
}
else {
//做别的事
}
}


I'm trying to capture changes of checkbox in popup of my Chrome Extension. Documentation says:

Inline JavaScript will not be executed

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.

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

解决方案

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

Example of html from popup.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

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
   }
}

这篇关于如何在Chrome扩展程序的弹出窗口中为checkbox添加事件监听器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！