Heim > Artikel > Web-Frontend > So verwenden Sie die JS-Ereignisdelegierung in Ihrem Projekt

So verwenden Sie die JS-Ereignisdelegierung in Ihrem Projekt

php中世界最好的语言Original: 2018-06-09 11:53:091477Durchsuche

Dieses Mal zeige ich Ihnen, wie Sie die JS-Ereignisdelegierung in Projekten verwenden und welche Vorsichtsmaßnahmen für die Verwendung der JS-Ereignisdelegation in Projekten gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Im täglichen Leben hören wir möglicherweise das Konzept der Ereignisdelegation. Einige Schüler haben möglicherweise bereits ein gutes Verständnis für die Ereignisdelegation, und einige Schüler haben möglicherweise nur von der Ereignisdelegation gehört und können es einfach anwenden, aber für mich Ich weiß nicht viel über das Prinzip der Event-Delegation. Daher wird in diesem Blogbeitrag das Prinzip der Ereignisdelegierung in nativem JS erläutert, warum es eine Ereignisdelegierung gibt, warum die Ereignisdelegierung auf diese Weise verwendet werden kann und andere Probleme.

1. Ereignisfluss in js

Bevor wir den Ereignisdelegierten analysieren, überprüfen wir zunächst den Ereignisfluss in js, das heißt Sprudeln und Erfassen.

①. Wenn ein Knoten der unteren Ebene ein Ereignis auslöst, löst das Ereignis Schritt für Schritt ähnliche Ereignisse auf dem Knoten der oberen Ebene aus.

② Capture: Ähnlich wie beim Sprudeln, außer dass die Reihenfolge der Ereignisse umgekehrt ist. Das heißt, es wird vom Knoten der oberen Ebene an den Knoten der unteren Ebene übergeben

2 Prinzip der Ereignisdelegierung

Die Ereignisdelegierung wird basierend auf dem js-Ereignisstrom generiert , und die Ereignisdelegation verwendet Ereignisblasen. Fügen Sie das Ereignis zum übergeordneten Element oder Vorfahrenelement hinzu, um das Ereignis auszulösen.

<body>
  <p id="myp">
    <input type="button" value="按钮1" id="btn1">
    <input type="button" value="按钮2" id="btn2">
    <input type="button" value="按钮3" id="btn3">
  </p>
</body>
<script type="text/javascript">
  document.getElementById("myp").onclick=function(e){
    e=window.event||e;
    var btnId=e.target.id;
    switch(btnId){
      case "btn1":
        console.log("按钮1");
      break;
      case "btn2":
        console.log("按钮2");
      break;
      case "btn3":
        console.log("按钮3");
      break;
    }
  }
</script>

Der obige Code ist ein typischer Fall der Ereignisdelegierung. Das verwendete Prinzip ist das Ereignis-Bubbling, das Laden des Ereignisses auf das übergeordnete Element und die Unterscheidung der Schaltflächen durch Ereignisparameter

3. Zusammenfassung

Durch Delegieren des obigen Ereigniscodes Von Aus der Beobachtung können wir leicht die Vorteile der Ereignisdelegation ziehen:

① Reduzieren Sie die Anzahl der Seitenereignisbindungen. Je mehr Seitenereignisbindungen vorliegen, desto schlechter ist die Seitenausführungsleistung, sodass die Ereignisdelegation die Seite verbessern kann Leistung

②. Die Ereignisdelegation kann flexibel mit dynamischen Änderungen in untergeordneten Knoten umgehen. Unabhängig davon, ob untergeordnete Knoten zunehmen oder abnehmen, müssen Ereignisse nicht erneut gebunden werden.

Ich glaube, Sie haben es gemeistert Nachdem Sie den Fall in diesem Artikel gelesen haben, lesen Sie bitte andere verwandte Artikel auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Verwenden der Webpack-Refresh-Parsing-Funktion

So verwenden Sie das Installations-Plug-in in tatsächlichen Projekten

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die JS-Ereignisdelegierung in Ihrem Projekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie man tiefe und flache JS-Kopie in praktischen Projekten verwendetNächster Artikel：Wie man tiefe und flache JS-Kopie in praktischen Projekten verwendet

In Verbindung stehende Artikel

Mehr sehen