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.
.on(), um Ereignishandler anzuhängen. .on('eventName', handler)' betonen. keydown(), keyup(), click() und mousemove(). 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
. src
$(window).resize(function() {
var windowWidth = $(window).width();
if (windowWidth < 768) {
$("img").attr("src", "image-src-here.jpg");
// 此处更改图像src。
}
});
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:
anzeigen 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.
anzeigenWenn 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 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
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
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。
}
});keypress
. 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("您已经滚动足够了！");
// 更新警报框内的文本。
}
});anzeigen Mausereignis
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
(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ü:
anzeigenEinige 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.
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.
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()
$(window).scroll(function() {
if ($(window).scrollTop() >= 500) {
$("#alert").text("您已经滚动足够了！");
// 更新警报框内的文本。
}
});
handlerInOut
anzeigen Hinweis: Diese Demonstration verwendet den CSS -Filtereffekt, was IE nicht unterstützt.
Form Ereignisse
,
blur, focus und focusin Ereignisse focusout
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")
ausgelöst. In älteren Browsern gilt diese Veranstaltung nur für die Bildung von Elementen. blur
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
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.
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.
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.
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。
}
});.bind() Methoden in .live()? 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.
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。
}
});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.
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("您已经滚动足够了！");
// 更新警报框内的文本。
}
});.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.
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("请不要离开！"); // 不起作用。
}); 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;
}
}); 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;
}
}); 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!
Der Unterschied zwischen Front-End und Back-End
Verwendung von Versprechen
Was beinhalten Computersoftwaresysteme?
Was soll ich tun, wenn ich mein Breitband-Passwort vergesse?
Was ist Systemsoftware?
Lösung für Java-Erfolg und Javac-Fehler
Was soll ich tun, wenn das übereinstimmende Ergebnis der Vlookup-Funktion N/A lautet?
Der Unterschied zwischen Bond0 und Bond1
Der Unterschied zwischen verteilten und Microservices
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
