Dieser Artikel wurde von Wern Ancheta und Camilo Reyes überprüft. Vielen Dank an alle Peer -Rezensenten bei SitePoint für die Erh?hung der Inhalte von SitePoint -Inhalten!

jQuery kann fast alle Benutzer -Interaktionsverhaltensweisen auf einer Webseite erfassen und als Ereignisse definieren. Die Bedeutung von Ereignissen ist, dass Sie es Ihnen erm?glichen, entsprechend auf den Aktionen des Benutzers zu reagieren. Sie k?nnen beispielsweise Code schreiben, um die Hintergrundfarbe einer Webseite basierend auf Schaltfl?chenklicks oder Scrollereignissen zu ?ndern.

jQuery verfügt über viele schnelle Methoden, wie contextmenu(), hover() und keyup(), um verschiedene Ereignisse zu behandeln. Zus?tzlich zu den speziellen Methoden bietet JQuery auch eine gemeinsame on -Methode, mit der Sie Handler an ein beliebiges Ereignis anbringen k?nnen: on('eventName', handler). Denken Sie daran, dass diese Methoden nur Wrapper für Standard -DOM -Ereignisse sind, zu denen Sie Handler in reinem JavaScript hinzufügen k?nnen.

In diesem Tutorial werden alle diese Ereignismethoden (unterteilt in fünf Hauptkategorien) schnell untersucht und Best Practices diskutieren, wenn sie sie verwenden.

Schlüsselpunkte

• jQuery Ereignisse erfassen Benutzerinteraktionen und erm?glichen Sie reaktionsschnelle und interaktive Webanwendungen. Verwenden Sie Methoden wie .on(), um Ereignishandler anzuh?ngen.
• Browser -Ereignisse in JQuery umfassen Handhabungsfehler, die Gr??e von Windows und das Scrollen, bei denen bestimmte spezifische Methoden in neueren Versionen veraltet sind und die Verwendung von .on('eventName', handler)' betonen.
• Dokumentladeereignis stellt sicher, dass das Skript erst nach dem DOM ausgeführt wird, was vollst?ndig fertig ist, wodurch Fehler im Zusammenhang mit nicht initialisierten Elementen vermieden werden.
• Tastatur- und Mausereignisse in JQuery verarbeiten eine Vielzahl von Interaktionen, von Tastendrücken bis hin zu Mausbewegungen, einschlie?lich keydown(), keyup(), click() und mousemove().
• Formularereignisse verwalten Benutzereingaben und Interaktionen innerhalb eines Formulars. JQuery bietet spezielle Ereignisse zur effektiven Verwaltung von Fokus, ?nderungen und Einsendungen.

Browser -Ereignisse

Diese Kategorie enth?lt drei Ereignisse: error, resize und scroll. Das error -Ereignis wird ausgel?st, wenn Elemente wie Bilder falsch geladen werden. Die Verknüpfungsmethode wurde seit JQuery Version 1.8 veraltet, sodass Sie jetzt stattdessen on('error', handler) verwenden sollten.

resize Ereignis

Dieses Ereignis wird ausgel?st, wenn sich die Gr??e des Browserfensters ?ndert. Verschiedene Browser k?nnen den resize -Ant?ler auf unterschiedliche Weise gem?? der Implementierungsmethode aufrufen. Internet Explorer und Webkit-basierte Browser rufen Handler kontinuierlich an, w?hrend Browser wie die Opera nur dann aufrufen, wenn das Ereignis endet. resize

Die folgenden Code -Snippet -Bilder basieren auf der Fensterbreite

. src

$(window).resize(function() {
  var windowWidth = $(window).width();
  if (windowWidth < 768) {
    $("img").attr("src", "image-src-here.jpg");
    // 此處更改圖像src。
  }
});

Diese Codepen -Demonstration zeigt den tats?chlichen Effekt des Ereignisses:

CODEPEN -Demo anzeigen

scroll Ereignis

Element kann dieses Ereignis ausl?sen, wenn der Benutzer in einem bestimmten Element in verschiedene Positionen scrollt. Mit Ausnahme des window -Objekts kann jedes Element mit einer Bildlaufleiste dieses Ereignis ausl?sen. Beispielsweise kann jedes Element, das das Attribut overflow auf scroll oder eines scrollbaren Iframe feststellt, dieses Ereignis ausl?sen.

Denken Sie daran, dass der Handler aufgerufen wird, wenn sich die Bildlaufposition ?ndert. Die Ursache der Schriftrolle spielt keine Rolle. Es kann durch Drücken der Pfeiltaste, Klicken oder Ziehen der Bildlaufleiste oder mit dem Mausrad ausgel?st werden. In dem folgenden Code überprüfen wir, ob der Benutzer mehr als 500 Pixel scrollt und einige Vorg?nge ausführt.

$(window).resize(function() {
  var windowWidth = $(window).width();
  if (windowWidth < 768) {
    $("img").attr("src", "image-src-here.jpg");
    // 此處更改圖像src。
  }
});

In der Codepen -Demo unten sollten Sie eine Benachrichtigung sehen, wenn Sie weiter scrollen und in der N?he erreichen, dass Sie fast den Ende der Seite erreicht haben:

CODEPEN -Demo

anzeigen

Dokumentladeereignis

jQuery verfügt über drei Methoden, die gem?? dem Status des Dokuments oder DOM ausgel?st werden. Sie sind load, unload und ready.

load() kann verwendet werden, um einen Handler an ein beliebiges Element anzuh?ngen, das externe Ressourcen wie Bilder, Skripte, IFRames und window Objekte selbst l?dt. Das Ereignis wird abgefeuert, wenn das Element, das es befindet, und alle Kinderelemente vollst?ndig beladen sind. Wenn es mit Bildern verwendet wird, bringt es einige Probleme. Erstens sprudelt es den Dom -Baum nicht richtig. Das zweite Problem ist, dass es weder zuverl?ssig noch Kreuzbrowser ist.

Wenn der Benutzer aus der Webnavigation abreist, wird das Ereignis unload ausgel?st. Dies kann darauf zurückzuführen sein, dass der Benutzer auf den Link geklickt, eine neue URL in die Adressleiste eingegeben oder das Browserfenster geschlossen hat. Das Page -Nachladen l?st dieses Ereignis auch aus. Bitte beachten Sie, dass die Verwendung von preventDefault() das Ereignis unload nicht storniert. Darüber hinaus ignorieren die meisten Browser Anrufe zu alert(), confirm() und prompt() in diesem Ereignishandler, was bedeutet, dass der folgende Code nicht funktioniert:

$(window).scroll(function() {
  if ($(window).scrollTop() >= 500) {
    $("#alert").text("您已經(jīng)滾動足夠了！");
    // 更新警報框內(nèi)的文本。
  }
});

Sowohl load() als auch unload() sind seit Version 1.8 veraltet.

ready Ereignis

In den meisten F?llen müssen alle Elemente (z. B. Bilder) nicht vollst?ndig geladen werden, wenn das Skript ohne Probleme ausgeführt werden kann. Sie müssen sicherstellen, dass die DOM -Hierarchie vollst?ndig gebaut ist. Das Ereignis ready erledigt dies für Sie. Alle an dieses Ereignis angeh?ngten Handler werden erst ausgeführt, nachdem der DOM fertig ist. Im Handler k?nnen Sie JQuery Code ausführen oder den Ereignishandler an andere Elemente anschlie?en, ohne sich darüber Sorgen zu machen.

Die CodePen -Demonstration unterl?dt hochaufl?sende Bilder. Sie werden feststellen, dass das DOM bereit ist, bevor das Bild voll geladen ist.

CODEPEN -Demo

anzeigen

Wenn Ihr Code vom Wert einiger Eigenschaften des CSS -Stils abh?ngt, sollten Sie zun?chst einen Verweis auf das entsprechende Stylesheet oder ein eingebetteter Stil geben, bevor Sie ihn ausführen.

Tastaturereignisse

Tastaturereignisse k?nnen durch die Interaktion eines Benutzers mit der Tastatur ausgel?st werden. Jedes solcher Ereignis enth?lt Informationen zum Tastendruck- und Ereignisart. In jQuery - keydown(), keyup() und keypress() gibt es drei Tastaturereignisverknüpfungen.

keyup und keydown Ereignisse

Wie der Name schon sagt, wird keyup ausgel?st, wenn der Benutzer die Taste auf der Tastatur ver?ffentlicht. Der Handler für beide Ereignisse kann an ein beliebiges Element angeh?ngt werden, aber nur der Handler auf dem Element, das derzeit mit Fokus fokussiert wird, wird ausgel?st. keydown

Es wird empfohlen, das Attribut des Ereignisobjekts

zu verwenden, um zu bestimmen, welche Taste gedrückt wird. Dies liegt daran, dass der Browser unterschiedliche Eigenschaften verwendet, um diese Informationen zu speichern, und JQuery normalisiert das Attribut which, um diese Informationen zuverl?ssig abzurufen. which

Eine andere Sache, die es wert ist, sich zu erinnern, ist, dass die beiden Ereignisse nicht zwischen

und <kbd>a</kbd> unterscheiden. Im letzteren Fall sind <kbd>shift a</kbd> und <kbd>shift</kbd> getrennt registriert. In dem folgenden Code zeige ich dem Benutzer ein Warnfeld, das alle <kbd>a</kbd> -Erglieds registriert. Wenn die Taste keydown gedrückt wird, wird ein bestimmtes Element aus dem DOM gel?scht. <kbd>y</kbd>

$(window).resize(function() {
  var windowWidth = $(window).width();
  if (windowWidth < 768) {
    $("img").attr("src", "image-src-here.jpg");
    // 此處更改圖像src。
  }
});

CODEPEN -Demo anzeigen

Ereignis keypress

Dieses Ereignis ?hnelt dem Ereignis

. Ein wesentlicher Unterschied besteht darin, dass Modifikatoren und Nicht-Print-Schlüssel (wie keydown, <kbd>Shift</kbd> usw.) das Ereignis <kbd>Esc</kbd> nicht ausl?sen. Wenn ich sage, dass Sie das Ereignis nicht verwenden sollten, um spezielle Schlüssel (wie Pfeiltasten) zu erfassen, kann ich es nicht zu sehr ausdrücken. Wenn Sie wissen m?chten, welcher Charakter (wie a oder a) Sie eingegeben haben, sollten Sie keypress verwenden. keypress keypress Der folgende Code -Snippet verbirgt Elemente basierend auf der gedrückten Taste:

$(window).scroll(function() {
  if ($(window).scrollTop() >= 500) {
    $("#alert").text("您已經(jīng)滾動足夠了！");
    // 更新警報框內(nèi)的文本。
  }
});

CODEPEN -Demo

anzeigen Mausereignis

Ein Mausereignis wird ausgel?st, wenn der Benutzer mit einem Zeigeger?t (z. B. einer Maus) interagiert. Diese Ereignisse k?nnen auf Klicks (z. B.

,

und click) oder auf Mobilger?ten (z. B. dblclick, contextmenu und mouseenter) basieren. In diesem Abschnitt werde ich kurz alle diese Ereignisse diskutieren und einige Demonstrationen aufnehmen, um die geringfügigen Unterschiede zwischen ihnen zu veranschaulichen. mouseleave mousemove Click-basierte Ereignisse

jQuery definiert fünf Click-basierte Ereignismethoden. Die Ereignisse

und

(wie aus dem Namen ersichtlich) werden abgefeuert, wenn der Benutzer die Maustaste auf dem Element drückt und freigibt. Andererseits wird das Ereignis mousedown nur dann ausgel?st, wenn die Maustaste auf das angegebene Element gedrückt und anschlie?end freigegeben wird. mouseup

dblclick etwas kompliziert. Damit Ereignisse als dblclick registriert werden sollen, sollten zwei schnelle Mausklicks vorhanden sein, bevor ein systembezogenes Z?hlenintervall abl?uft. Sie sollten den Handler nicht sowohl click als auch dblclick eines einzelnen Elements anbringen, da die von einem Doppelklick ausgel?sten Ereignisse browserspezifisch sind. Einige Browser registrieren m?glicherweise zwei Einzelklick-Ereignisse vor dem Doppelklicken, w?hrend andere vor dem Doppelklicken nur ein einzelnes Klickereignis registrieren k?nnen.

Das Ereignis contextmenu wird nach der rechten Maustaste auf das Element ausgel?st, bevor das Kontextmenü angezeigt wird. Dies bedeutet, dass Sie den entsprechenden Code im Ereignishandler verwenden k?nnen, um zu verhindern, dass das Menü Standardkontext angezeigt wird.

Der folgende Code-Snippet verhindert, dass das Standard-Kontextmenü beim mit der rechten Maustaste angezeigten Menü angezeigt wird, sondern stattdessen ein benutzerdefiniertes Menü ansetzt:

$(window).resize(function() {
  var windowWidth = $(window).width();
  if (windowWidth < 768) {
    $("img").attr("src", "image-src-here.jpg");
    // 此處更改圖像src。
  }
});

Diese Demo wendet beim Klicken auf ein Bild den CSS -Stil auf das Bild an und verfügt über ein benutzerdefiniertes Kontextmenü:

CODEPEN -Demo

anzeigen

Mobile Ereignisse

Einige Ereignisse basieren auf der Bewegung des Mauszeigers, ein Element einzugeben oder zu entfernen. Es gibt sechs mobile Ereignismethoden.

Beginnen wir mit den Ereignissen mouseover und mouseenter. Wie der Name schon sagt, werden beide Ereignisse abgefeuert, wenn der Mauszeiger in ein Element eintritt. Wenn der Mauszeiger das Element verl?sst, werden die Ereignisse mouseleave und mouseout in ?hnlicher Weise abgefeuert.

Ein Unterschied zwischen

mouseleave und mouseout besteht darin, dass der erstere nur dann abgefeuert wird, wenn sich der Mauszeiger au?erhalb des Elements bewegt, das ihn bindet. Andererseits wird auch für Bewegung au?erhalb aller Nachkommen des Elements mouseout ausgel?st. Es gibt genau den gleichen Unterschied zwischen mouseenter und mouseover.

CODEPEN -Demo

anzeigen

Lassen Sie uns sehen, wie sich das Ereignis basierend auf der Mausbewegung ?ndert, mouseenter und mouseover. Versuchen Sie, die gro?e blaue Box von rechts einzugeben, und stoppen Sie, bevor Sie die rosa Box rechts eingeben. mouseenter und mouseover sollten nun beide Werte von 1 haben. Wenn Sie sich nach links bewegen und die rosa Box eingeben, wechselt die Z?hlung mouseover auf 2. Dies geschieht, weil das Ereignis von mouseover sprudelt. Das Ereignis mouseover auf der rosa Box "Brubles" in die ?u?ere blaue Box und erh?ht die Anzahl des mouseover -Ergners um 1. Das Ereignis mouseover feuert erneut aus, wenn Sie sich weiter nach links bewegen und zwischen den beiden rosa Kisten stehen. Wenn Sie das linke Ende des Blue Box erreichen, sollte die Anzahl der mouseover Ereignis 5 sein, und die Anzahl des mouseenter -Ergners sollte immer noch 1 sein.

Die genaue Argumentation kann verwendet werden, um die Anzahl der Ereignisse mouseleave und mouseout zu erkl?ren. Versuchen Sie, sich in verschiedene Richtungen zu bewegen, und sehen Sie, wie sich die Anzahl ?ndert.

mousemove und hover Ereignisse

Wenn sich der Mauszeiger innerhalb des Elements bewegt, wird das Ereignis mousemove ausgel?st. Solange es eine Maus bewegt, wird sie ausgel?st, auch wenn sie so klein wie ein Pixel ist. Daher k?nnen Hunderte von Ereignissen in sehr kurzer Zeit ausgel?st werden. Wie Sie sich vorstellen k?nnen, führt die Durchführung komplexer Operationen in einem Event -Handler zu einem Browser zurück. Es wird empfohlen, den Ereignishandler mousemove so effizient wie m?glich zu gestalten und ihn zu entbinden, wenn er nicht mehr ben?tigt wird.

hover Nur frei, wenn der Mauszeiger das Element betritt oder verl?sst. Es gibt zwei M?glichkeiten, die hover -Methode aufzurufen. Der erste ist:

$(window).resize(function() {
  var windowWidth = $(window).width();
  if (windowWidth < 768) {
    $("img").attr("src", "image-src-here.jpg");
    // 此處更改圖像src。
  }
});

Hier wird hier ausgeführt, wenn der Zeiger der Maus in das Element eingeht, wenn der Mauszeiger das Element verl?sst. Die zweite Methode ist: handlerIn() handlerOut()

Diesmal wird die gleiche

$(window).scroll(function() {
  if ($(window).scrollTop() >= 500) {
    $("#alert").text("您已經(jīng)滾動足夠了！");
    // 更新警報框內(nèi)的文本。
  }
});

-Funktion beim Eingeben und Verlassen des Elements ausgeführt.

handlerInOut

CODEPEN -Demo

anzeigen Hinweis: Diese Demonstration verwendet den CSS -Filtereffekt, was IE nicht unterstützt.

Form Ereignisse

Formulare sind überall im Internet. Fast jeder Benutzer füllt das Formular irgendwann aus. JQuery hat eine besondere M?glichkeit, mit Formularveranstaltungen umzugehen. Diese Ereignisse k?nnen abgefeuert werden, wenn sich der Wert ?ndert oder den Fokus verliert. Insgesamt gibt es sieben Form -Ereignisse, und wir werden sie einzeln besprechen.

,

, blur, focus und focusin Ereignisse focusout

Wenn ein Element den Fokus gewinnt, wird das Ereignis

ausgel?st. Es funktioniert nur mit Formularelementen und Anker -Tags. Um sich auf jedes andere Element zu konzentrieren, müssen Sie das focus -Merkmal des Elements festlegen. Denken Sie daran, dass im Internet Explorer ein Fokus auf versteckte Elemente zu einem Fehler führen kann. Wenn Sie das Ereignis tabindex ausl?sen müssen, ohne den Fokus ausdrücklich festzulegen, k?nnen Sie die focus -Methode aufrufen. triggerHandler("focus")

Wenn das Element den Fokus verliert, wird das Ereignis

ausgel?st. In ?lteren Browsern gilt diese Veranstaltung nur für die Bildung von Elementen. blur

Im Gegensatz zu

Ereignissen wird focus immer dann ausgel?st, wenn ein Element oder seine Nachkommen den Fokus gewinnen. In ?hnlicher Weise wird focusin ausgel?st, wenn ein Element oder seine Nachkommen den Fokus verlieren. Wenn Sie also m?chten, dass die Veranstaltung in die Luft sprudelt, sollten Sie beide Ereignisse verwenden. focusout

, select und change Ereignisse submit

Wenn sich der Wert eines Elements ?ndert, wird das Ereignis

ausgel?st. Dieses Ereignis gilt nur für change, <input> und <select> Elemente. Für Kontrollk?stchen, Optionsfelder und Auswahlfelder wird dieses Ereignis unmittelbar nach der Auswahl des Benutzers ausgel?st. Bei anderen Elementen wird es erst abgefeuert, nachdem das Element den Fokus verliert. Beachten Sie auch, dass dieses Ereignis nicht ausgel?st wird, wenn Sie den Wert des Eingabeelements mit JavaScript ?ndern. <textarea>

Wenn der Benutzer im Element Textauswahlen trifft, wird das Ereignis select ausgel?st. Dieses Ereignis hat einen begrenzteren Umfang und gilt nur für <input> und <textarea> Elemente. Wenn Sie ausgew?hlten Text abrufen m?chten, müssen Sie ein Cross-Browser-JQuery-Plugin verwenden.

Wenn der Benutzer versucht, ein Formular einzureichen, wird das Ereignis submit ausgel?st. Sie k?nnen nur Handler an Elemente anbringen. Um dieses Ereignis auszul?sen, muss der Benutzer auf das Element <button>, <input type="submit"> oder <input type="image"> klicken. Interessanterweise sprudeln JavaScript submit Ereignisse nicht im Internet Explorer. Dieses Verhalten wurde jedoch im Browser seit JQuery Version 1.4 standardisiert.

CODEPEN -Demo

anzeigen

?nderungen in jQuery 3

Da JQuery Version 1.8, wurden die Methoden load, error und unload veraltet. load() Die Methode ist von Natur aus unklar. Diese Methode kann AJAX -Ladungen bedeuten oder tats?chlich load Ereignisse abgefeuert. In ?hnlicher Weise kann die error -Methode auch mit der jQuery.error() -Methode verwechselt werden. Jetzt in JQuery 3 wurden diese Methoden endlich entfernt. Sie müssen jetzt die on -Methode verwenden, um diese Ereignish?rer zu registrieren.

Der letzte Gedanke

In diesem Artikel habe ich die Unterschiede zwischen allen wichtigsten JQuery -Ereignismethoden und ?hnlichen Ereignissen behandelt. Wenn Sie wissen, wann Sie keypress statt keydown verwenden müssen, k?nnen Sie Probleme vermeiden und wertvolle Zeit sparen. W?hrend es m?glich ist, mit reinem JavaScript eine Verbindung zu DOM-Ereignissen herzustellen, hat JQuery eine gewisse Normalisierung der Kreuzungsunterschiede im Hintergrund, je nachdem, welche Browser Ihre Website/Anwendung unterstützen müssen, was von Vorteil sein kann.

Um mehr über Ereignisse zu erfahren, k?nnen Sie auf die offizielle JQuery -Dokumentation zugreifen. Wenn Sie Fragen oder Tipps zur Verwendung von Ereignissen in JQuery haben, hinterlassen Sie bitte einen Kommentar.

FAQ für JQuery -Ereignisse (FAQ)

Wie k?nnen Ereignisse in JQuery verhindern, dass Ereignisse sprudelten?

In jQuery k?nnen Sie die event.stopPropagation() -Methode verwenden, um zu verhindern, dass Ereignisse nach oben des DOM -Baumes ausblasen. Diese Methode verhindert, dass sich Ereignisse zum übergeordneten Element vermehren. Es ist zu beachten, dass es nicht verhindern, dass ein Standardverhalten stattfindet. Hier ist ein Beispiel dafür, wie man es verwendet:

$(window).resize(function() {
  var windowWidth = $(window).width();
  if (windowWidth < 768) {
    $("img").attr("src", "image-src-here.jpg");
    // 此處更改圖像src。
  }
});

Was ist der Unterschied zwischen

und .bind() Methoden in .live()?

Die Methoden

und .bind() in .live() jQuery werden beide verwendet, um einen Ereignishandler an ein Element anzubringen. Der Hauptunterschied zwischen ihnen besteht darin, dass .bind() den Handler nur an das aktuelle Element anh?lt, w?hrend .live() den Handler an das aktuelle Element und alle Elemente anh?lt, die dem Selektor in der Zukunft übereinstimmen. Es ist jedoch erw?hnenswert, dass die .live() -Methode seit JQuery 1.7 veraltet ist und in JQuery 1.9 entfernt wurde. Sie sollten stattdessen die .on() -Methode verwenden.

Wie kann man ein Ereignis programmgesteuert in JQuery ausl?sen?

Sie k?nnen die .trigger() -Methode verwenden, um Ereignisse programmgesteuert in JQuery auszul?sen. Mit dieser Methode k?nnen Sie ein bestimmtes Ereignis in einem Element manuell ausl?sen. Hier ist ein Beispiel:

$(window).resize(function() {
  var windowWidth = $(window).width();
  if (windowWidth < 768) {
    $("img").attr("src", "image-src-here.jpg");
    // 此處更改圖像src。
  }
});

Was ist der Event -Delegierter in JQuery und warum ist es nützlich?

Ereignisdelegation in JQuery ist eine Technik, bei der Sie die Verarbeitung eines Ereignisses an das übergeordnete Element delegieren, anstatt den Ereignishandler an die einzelnen Elemente zu binden. Dies ist besonders nützlich, wenn Sie über eine gro?e Anzahl von Elementen verfügen, die einen Ereignishandler erfordern, oder wenn Sie dem DOM dynamisch Elemente hinzufügen. Es verbessert die Leistung, indem es die Anzahl der Ereignishandler verringert, die gebunden werden müssen.

Wie blockiere ich den Standardbetrieb von Ereignissen in JQuery?

Mit der Methode event.preventDefault() k?nnen Sie den Standardbetrieb von Ereignissen in JQuery blockieren. Diese Methode verhindert den Standardbetrieb des Ereignisses. Zum Beispiel kann es verhindern, dass Links URLs folgen.

$(window).scroll(function() {
  if ($(window).scrollTop() >= 500) {
    $("#alert").text("您已經(jīng)滾動足夠了！");
    // 更新警報框內(nèi)的文本。
  }
});

Was ist der Unterschied zwischen .click() und .on('click') in jQuery?

Die .click() -Methode in jQuery ist die Abkürzung von .on('click'). Beide Methoden fügen den Klick -Ereignis -Handler an das ausgew?hlte Element hinzu. Die .on() -Methode bietet jedoch eine gr??ere Flexibilit?t, da sie auch Ereignisse dynamisch zugesetzter Elemente verarbeiten und mehrere Ereignisse gleichzeitig verarbeiten kann.

Wie kann man Double-Click-Event in JQuery erkennen?

Mit der Methode .dblclick() k?nnen Sie in JQuery Doppelklickereignisse erkennen. Diese Methode erh?ht eine Funktion, die ausgeführt wird, wenn ein Doppelklickereignis im ausgew?hlten Element auftritt. Hier ist ein Beispiel:

$(window).unload(function() {
  alert("請不要離開！"); // 不起作用。
});

Wie binden Sie mehrere Ereignisse an Elemente in JQuery?

Sie k?nnen mit der Methode .on() mehrere Ereignisse an Elemente in JQuery binden. Mit dieser Methode k?nnen Sie mehrere Ereignishandler an das ausgew?hlte Element anh?ngen. Hier ist ein Beispiel:

$("#alert").keydown(function(event) {
  switch (event.which) {
    case 89: // y的鍵碼
      $("#element").remove(); // 從DOM中刪除元素
      break;
  }
});

Wie kann man Event -Handler in JQuery entbinden?

Sie k?nnen die Methode .off() verwenden, um den Event -Handler in JQuery zu entbinden. Diese Methode beseitigt den mit .on() angeschlossenen Ereignishandler. Hier ist ein Beispiel:

$("body").keypress(function(event) {
  switch (event.keyCode) {
    case 75:
      // 75在keypress事件中代表大寫K
      $(".K").css("display", "none");
      break;
  }
});

Wie kann man mit der rechten Mausereignis in JQuery einklicken?

Sie k?nnen die Methode .contextmenu() verwenden oder die Eigenschaft "Welche" Eigenschaft des Ereignisobjekts im Ereignis mousedown überprüfen, um das Rechtsklick-Ereignis in JQuery zu erkennen. Die Eigenschaft "Welche" Eigenschaft ist 3 für Klicks. Hier ist ein Beispiel:

$("img").contextmenu(function(event) {
  event.preventDefault();
  $("#custom-menu")
    .show().css({
      top: event.pageY + 10,
      left: event.pageX + 10
      // 在鼠標(biāo)點擊附近顯示菜單
    });
});

$("#custom-menu #option").click(function() {
   $("img").toggleClass("class-name");
   // 切換圖像類。
});

Das obige ist der detaillierte Inhalt vonEin umfassender Blick auf Ereignisse in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!