將onclick（）添加到數百個復選框的最輕巧的方法是什么？

Question

我有一個網頁，主要供移動用戶使用（約占我的用戶的80％），其中包含約350個<input type="checkbox">元素。 選中或取消選中復選框時，我想調用一些JavaScript來將狀態保存在本地存儲中。 當我創建頁面時，只有大約100個元素，因此沒有使每個元素<input type="checkbox" onclick="save();">看起來容易產生錯別字，或者只是忘記添加onclick ，而是添加了這個元素到我的onload函數：

var input_elements = document.querySelectorAll("input[type='checkbox']");
for (var i = 0; i < input_elements.length; i++) {
    input_elements[i].addEventListener("click", function() { save(this); });
}

這種方法效果很好，但對頁面加載時間的影響卻很小-隨着我添加元素的增加，這種情況變得越來越糟，而且我希望每年繼續增加100-150。

在減少加載時間（特別是對於瀏覽器速度較慢的移動用戶）方面，以及防止我做出愚蠢的錯別字使用戶感到有些不適，但我卻很難發現，這樣做是否有“更好”的方式？

Answer 1

您可以在一些公共父對象上添加事件處理程序，例如，如果沒有包裝父對象，則可以使用一些包裝div或document 。 搜索event delegation mechanism以獲取有關此模式的更多信息。

Answer 2

您可以添加捕獲點擊處理程序並測試點擊是否在復選框上：

function checkCheck(event) {
    if( event.target && event.target.type == "checkbox"){
      checkSave( event.target)
    }
}
function checkSave( checkBox) {
    // do something for click on checkbox element
    console.log("checkbox %s, checked: %s", checkBox.id, checkBox.checked);
}
window.addEventListener("click", checkCheck, true);

的HTML

<input type="checkbox" id="test">