Ein umfassender Blick auf Ereignisse in JQuery

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("您已经滚动足够了！");
    // 更新警报框内的文本。
  }
});

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("您已经滚动足够了！");
    // 更新警报框内的文本。
  }
});

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("您已经滚动足够了！");
    // 更新警报框内的文本。
  }
});

-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("您已经滚动足够了！");
    // 更新警报框内的文本。
  }
});

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
      // 在鼠标点击附近显示菜单
    });
});

$("#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!