Erklären Sie die JavaScript-Ereignisdelegationstechnologie

Bevor wir es erklären, sprechen wir über die Leistung.

Wenn eine ganze Seite eine große Anzahl von Schaltflächen enthält, müssen wir Ereignishandler an jede Schaltfläche binden. Dies wirkt sich auf die Leistung aus.

Erstens ist jede Funktion ein Objekt und das Objekt belegt viel Speicher.

Zweitens steigt die Anzahl der DOM-Zugriffe führt zu verzögertem Laden der Seite. Tatsächlich gibt es immer noch gute Lösungen für die sinnvolle Nutzung von Ereignishandlern.

Ereignisdelegation

Die Lösung für das Problem zu vieler Ereignisse Handler ist eine Ereignisdelegationstechnologie.

Die Ereignisdelegationstechnologie nutzt die Möglichkeit, Ereignisse zu sprudeln.

Wir können einen Ereignishandler an ein übergeordnetes Element binden ein Ereignis.

HTML-Code:

<ul id="mylist">
        <li id="li_1">sdsdsd</li>
        <li id="li_2">sdsdsd</li>
        <li id="li_3">sdsdsd</li>
</ul>

Jetzt müssen wir Ereignishandler für diese 3 li binden.

Nur ​​die ul binden Definierter Event-Handler.

js-Code:

obj.eventHandler($("mylist"),"click",function(e){
                    e = e || window.event;
                    switch(e.target.id){    //大家应该还记得target是事件目标,只要点击了事件的目标元素就会弹出相应的alert.
                        case "li_1":
                        alert("li_1");
                        break;
                        case "li_2":
                        alert("li_2");
                        break;
                        case "li_3":
                        alert("li_3");
                        break
                    }
                })

In einer komplexen Webanwendung ist diese Art der Event-Delegation sehr praktisch.

Wenn Sie diese Methode nicht verwenden, gibt es unzählige Event-Handler, wenn Sie sie einzeln binden.

Okay, das ist es