如何在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'事件，因為每次點擊都會更改復選框的狀態。