Dieser Artikel analysiert die JavaScript -Event -Delegationstechnologie in einem Beispiel. Teilen Sie es für Ihre Referenz. Die spezifische Analyse ist wie folgt:
Wenn sich auf einer Gesamtseite eine große Anzahl von Schaltflächen befindet, müssen wir Ereignishandler für jede Taste binden. Dies wirkt sich auf die Leistung aus.
Zunächst ist jede Funktion ein Objekt, und das Objekt wird viel Speicher einnehmen. Je mehr Objekte es im Gedächtnis gibt, desto schlechter die Leistung.
Zweitens führt die Zunahme der Anzahl der DOM -Besuche dazu, dass die Seite spät geladen wird. Tatsächlich gibt es immer noch gute Lösungen, wie man Event -Handler nutzt.
Ereignisdelegation:
Die Lösung für das Problem von zu vielen Ereignis -Handlern ist die Event -Delegationstechnologie.
Event -Delegate -Technologie nutzt Event Blasen. Geben Sie einfach einen Event -Handler an.
Wir können Ereignishandler für ein übergeordnetes Element binden, das ein Ereignis auslösen muss.
<ul id = "myList"> <li id = "li_1"> sdsdsd </li> <li id = "li_2"> sdsdsd </li> <li id = "li_3"> sdsdsd </li> </ul>
Jetzt wollen wir Ereignishandler für diese 3 LIS Binden ...
Binden Sie einfach den Event -Handler in UL.
obj.eventHandler ($ ("mylist"), "click", function (e) {e = e || window.event; switch (e.target.id) {// Jeder sollte sich noch daran erinnern, dass Target das Ereignisziel ist, // Solange das Zielelement des Ereignisses geklickt wird, wird der korrespondierende Alarm aufliegen. Case "li_1". alert ("li_2");In einer komplexen Webanwendung ist diese Art von Ereignisdelegation sehr praktisch.
Wenn diese Methode nicht angewendet wird, sind die Bindung nacheinander endlose Ereignishandler.
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.