何百ものチェックボックスにonclick（）を追加する最も軽い方法は何ですか？

Question

私は主にモバイルユーザー（約80％のユーザー）が使用するWebページを持っており、約350 <input type="checkbox">の要素があります。チェックボックスをオンまたはオフにすると、javascriptを呼び出してローカルストレージに状態を保存する必要があります。

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の要素ので、代わりのタイプミスを起こしやすいか、単なるonclickを追加し忘れ見えた各要素<input type="checkbox" onclick="save();">が、私は私のonload機能にこれを追加することがありました要素を追加するにつれて悪化しているページの読み込み時間に小さなペナルティが追加されています。毎年別の要素を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">