Heim > häufiges Problem > Hauptteil

Es gibt verschiedene Möglichkeiten, JQuery-Ereignisse hinzuzufügen

尊渡假赌尊渡假赌尊渡假赌
Freigeben: 2023-06-21 14:53:57
Original
2541 Leute haben es durchsucht

Die Möglichkeiten zum Hinzufügen von JQuery-Ereignissen sind: 1. Verwenden Sie JavaScript direkt im Tag. Der Code ist prägnant und leicht zu verstehen, ohne dass andere Bibliotheken oder Dateien eingeführt werden müssen. 2. Verwenden Sie „onclick“, „onmouseover“ und andere Methoden, um ihn neu zu organisieren eine separate JavaScript-Datei, einfacher zu verwalten und zu teilen; 3. „.bind()“-Bindungsereignis, das mehrere Ereignishandler an ein einzelnes Element binden kann 4. „.on()“-Bindungsereignis, das delegierte Ereignishandler unterstützt Reduzieren; Codekomplexität.

Es gibt verschiedene Möglichkeiten, JQuery-Ereignisse hinzuzufügen

Das Betriebssystem dieses Tutorials: Windows 10-System, jQuery Version 3.6.0, Dell G3-Computer.

jQuery bietet viele Möglichkeiten, Event-Handler hinzuzufügen, hier sind vier davon:

1. Verwenden Sie JavaScript direkt auf dem Etikett

   ```HTML
   <button onclick="alert(&#39;Hello world!&#39;)">Click Me</button>
   ```
Nach dem Login kopieren

Vorteile:

  • Der Code ist einfach und leicht zu verstehen

  • Keine Notwendigkeit, andere Bibliotheken oder Dateien einzuführen

Nachteile:

  • Nicht förderlich für Wartung und Wiederverwendung

  • Hohe Kopplung, JavaScript- und HTML-Codes werden miteinander vermischt

2. Verwenden Sie die Elementmethode ` onclick ` / `onmouseover` usw.

   ```HTML
   <button id="foo">Click Me</button>
   ```
   ```javascript
   $(&#39;#foo&#39;).click(function() {
     alert(&#39;Hello world!&#39;);
   });
   ```
Nach dem Login kopieren

Vorteile:

  • Im Vergleich zur Verwendung von JavaScript direkt auf dem Tag kann der Code in einer separaten JavaScript-Datei neu organisiert werden, was einfacher zu verwalten und zu teilen ist

  • Unterstützt Ketten

Nachteile:

  • Wenn eine große Anzahl von Ereignissen und Handlern eingerichtet werden muss, kann diese Methode ausführlich und schwierig zu warten sein.

  • Objektmethoden basieren auf Ereignissen im Lebenszyklus des Objekts selbst

3. Verwenden Sie „.bind()“, um Ereignisse zu binden Die Methode „$.unbind()“ kann zur Überwachung des Registrierungs-/Abmeldevorgangs für Ereignisse verwendet werden. Nachteile:

`.bind() ist in jQuery Version 3.0 veraltet. Es wird empfohlen, „zu verwenden .on()`

  • 4. Verwenden Sie `.on()`, um Ereignisse zu binden
  • Das Folgende ist ein Beispielcode für die Ereignisbindung mit der Methode `.on()` von jQuery:

       ```HTML
       <button id="foo">Click Me</button>
       ```
       ```javascript
       var foo = function() {
         alert(&#39;Hello world!&#39;);
       };
       $(&#39;#foo&#39;).bind(&#39;click&#39;, foo);
       ```
    Nach dem Login kopieren
    `.on ()`-Methode Kann drei Parameter akzeptieren. Der erste Parameter ist der Ereignistyp, der abgehört/gebunden werden soll. Der zweite Parameter ist eine optionale Auswahlzeichenfolge oder ein DOM-Knoten, der zum Begrenzen des Satzes von Antwortelementen verwendet wird auszuführende Aktion.

    Vorteile:
    • Mit der Methode „.on()“ können Sie mit großer Flexibilität mehrere Ereignishandler für Dokumente/Elemente hinzufügen.

    Der hinzugefügte Event-Handler kann über die Methode „off()“ entfernt werden. Die Methode


    `.on()` unterstützt auch delegierte Ereignishandler, was die Komplexität des Codes erheblich reduziert, wenn eine große Anzahl von Elementen bearbeitet oder Elemente dynamisch hinzugefügt werden.


    Nachteile:

    • Abhängig von der Anzahl der angehängten Ereignisse und Elemente kann die direkte Bindung vieler Ereignishandler zu Leistungsproblemen führen.
    • Sie können „.on()“ nicht in altem Code mit jQuery-Versionen vor 1.7 verwenden. Sie müssen andere Methoden wie „.bind()“ verwenden (beachten Sie, dass diese Methode in Zukunft ebenfalls veraltet sein wird). ) und „.delegate ()“.

    Das obige ist der detaillierte Inhalt vonEs gibt verschiedene Möglichkeiten, JQuery-Ereignisse hinzuzufügen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!