Was ist der einfachste Weg, um onclick() zu Hunderten von Checkboxen hinzuzufügen?

Question

Ich habe eine Webseite, die hauptsächlich von mobilen Benutzern (etwa 80% meiner Benutzer) verwendet wird, mit etwa 350 <input type="checkbox"> Elementen. Wenn ein Kontrollkästchen aktiviert oder deaktiviert ist, möchte ich einige Javascript aufrufen, um den Status im lokalen Speicher zu speichern. Wenn ich meine Seite erstellt gab es nur etwa 100 Elemente so, anstatt, jedes Element <input type="checkbox" onclick="save();">, die auf Tippfehler anfällig schien vergessen oder einfach nur die onclick hinzuzufügen, habe ich diese auf meine onload Funktion:

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

die großen Werke aber fügt den Ladezeiten der Seiten eine kleine Strafe hinzu - die sich immer verschlechtert, wenn ich Elemente hinzufüge, und ich rechne damit, jedes Jahr weitere 100-150 hinzuzufügen.

Gibt es einen "besseren" Weg dies zu tun, sowohl in Bezug auf die Verringerung Ladezeiten (besonders für mobile Benutzer mit langsameren Browsern) und verhindert mir dumme Tippfehler, die etwas für meine Benutzer brechen, sind aber schwer für mich Stelle?

Answer 1

Sie können einen Ereignishandler zu einem gemeinsamen übergeordneten Element hinzufügen, z. B. einen Wrapper div oder document, wenn kein Wrapper-Parent vorhanden ist. Suchen Sie nach event delegation mechanism, um weitere Informationen zu diesem Muster zu erhalten.

Answer 2

Sie könnten einen Capturing Click-Handler und Test hinzufügen, wenn der Klick auf ein Kontrollkästchen war:

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