Einführung in jQuery Events
JQuery ist eine der beliebtesten und am weitesten verbreiteten Javascript-Bibliotheken, die entwickelt und entwickelt wurde, um die HTML-basierte DOM-Architektur, dh die Eigenschaften des Dokumentobjektmodells wie Lesen, Bearbeiten und Durchlaufen von Bäumen, zu vereinfachen. Die anderen Eigenschaften von jQueries wie Event-Handling, Ajax, Styling und CSS-Animation werden ebenfalls vereinfacht. Es ist eine Open-Source- und eine freie Bibliothek, die typischerweise in 73% der rd. 10 Millionen Websites, die heute verwendet werden. Zu den Kernfunktionen von Jquery zählen DOM-elementbasierte Eigenschaften wie Selektoren, Manipulation und Tree Traversal, wodurch die Arbeit mit JQuery viel interessanter, einfacher und bequemer wird.
Es wird verwendet, um eine sehr einfache und einfach aussehende Oberfläche bereitzustellen, die zum Anwenden verschiedener Arten erstaunlicher Effekte verwendet werden kann. Diese Methoden ermöglichen auch die schnelle Verwendung und Anwendung der am häufigsten verwendeten Funktionen und ihrer Auswirkungen sowie die Konfiguration auf ein Minimum. Die grundlegenden Befehle, wie zum Beispiel das Ein- und Ausblenden von Elementen, sind ziemlich gleich und andere liegen ebenfalls in der gleichen Kategorie, wie es jeder erwarten würde, der sie sehen möchte. Der Befehl show () wird in diesem Fall verwendet, um die Elemente vollständig umbrochen anzuzeigen, und ein kombinierter Befehl set and hide () wird verwendet, um diese Features auszublenden.
Jquery ist maßgeschneidert und wird verwendet, um auf Ereignisse in einer HTML-Seite zu reagieren. Die Ereignisse an sich sind die verschiedenen Aktionen der Besucher, auf die die Webseite reagieren kann. Mit anderen Worten, ein Ereignis wird verwendet, um den genauen oder den genauen Moment, insbesondere das Geschehene, geringfügig darzustellen. Dies kann Szenarien wie Bewegen der Maus über das Element, Klicken und Auswählen des Optionsfelds sowie Klicken auf das Element umfassen. Der Begriff Feuer oder der Begriff Feuer wird häufig zusammen mit dem Ereignis verwendet. Beispielsweise wird das Tastendruckereignis ausgelöst oder im Volksmund als ausgelöst bezeichnet. Dies ist hauptsächlich dann der Fall, wenn Sie die Taste drücken. Hier ist die Liste der häufigsten und am häufigsten verwendeten DOM-Ereignisse.
Mausereignisse wie dblclick, mouseleave, mouseenter, click Es gibt auch einige andere Tastaturereignisse, z. B. Tastendruck, Tastendruck und Tastendruck. Es gibt andere Arten von Ereignissen, z. B. Ereignisse zum Ändern, Übermitteln, Verwischen und Fokussieren. Es gibt andere Ereignisse, bei denen es sich um Dokument- oder Fensterereignisse handelt, z. B. Größenänderung, Laden, Scrollen, Entladen usw. In JQuery verfügen die meisten DOM-basierten Ereignisse über die entsprechende JQuery-Methode. Um daher allen vorhandenen Absätzen auf der Seite ein neues Ereignis zuzuweisen, kann die folgende Syntax verwendet werden.
Ereignisse und Syntax von jQuery
Hier sind die folgenden Ereignisse von jQuery mit der unten angegebenen Syntax
1. Klicken Sie auf ()
Dieses Ereignis tritt immer dann auf, wenn auf das Element geklickt wird. Diese click () -Methode wird verwendet, um das angeklickte Element auszulösen, das auch als Klickereignis bezeichnet wird und zum Anhängen an eine Funktion verwendet wird, wenn ein Klickereignis auftritt.
Syntax
$(selector).click()
Wenn Sie diesem Klickereignis eine Funktion hinzufügen möchten,
$(selector).click(function)
Der nächste Schritt geht immer mit der Aktion und dem Auslöser einher, der die tatsächliche Funktionsweise der Funktion bildet. Daher sollte bei jedem Auslösen des Ereignisses eine Funktion an das Ereignis übergeben werden.
Beispiel
$("p").click(function()(
// action which is triggered goes here!! ));
2. Doppelklick ()
Diese Methode wird verwendet, um eine Ereignishandlerfunktion an das bereitgestellte HTML-Element anzuhängen. Diese Funktion wird immer dann ausgeführt, wenn der Benutzer das angegebene HTML-Element doppelt anklickt.
Syntax
$(selector).dblclick()
Beispiel
$("p").dblclick(function()(
$(this).hide();
));
3. change ()
Dieses Ereignis tritt immer dann auf, wenn der Wert eines bestimmten Elements geändert wird, dh, es funktioniert nur für die Eingabe, den Textbereich und die ausgewählten Elemente. Die change () -Methode wird verwendet, um ein Änderungsereignis auszulösen oder das Ereignis, das an die Funktion angehängt wird, wenn ein änderungsbezogenes Ereignis auftreten muss.
Syntax
$(selector).change()
Beispiel
$("input").change(function()(
alert("This text related to this has been changed.");
));
4. blur ()
Diese ereignisbezogene Unschärfe tritt nur auf, wenn das Element den Fokus verliert. Die Methode blur (), die zum Auslösen des Unschärfeereignisses oder zum Anhängen einer Funktion verwendet wird, die ausgeführt werden soll, wenn ein Unschärfeereignis auftritt. Diese Methode wird häufig mit der focus () -Methode verwendet.
Syntax
$(selector).blur()
Beispiel
$("input").blur(function()(
alert("The field has lost its focus.");
));
5. Daten
Diese event.data -Eigenschaft wird verwendet, um die optional übergebenen Daten zu enthalten, die sich auf eine Ereignismethode beziehen, wenn der ausführende Handler für den aktuellen Vorgang gebunden wird.
Syntax
event.data
Beispiel
$("p").each(function(i)(
$(this).on("click", (x:i), function(event)(
alert("This index + ". paragraph has data: " + event.data.x);
));
));
6. Namespace
Diese Eigenschaft wird verwendet, um einen benutzerdefinierten Namespace zurückzugeben, wenn das Ereignis ausgelöst wird. Die Eigenschaft wird von Plugin-Autoren verwendet, um Aufgaben sehr unterschiedlich zu behandeln. Dies hängt vom verwendeten Namespace ab. Die Namespaces, die mit dem Unterstrich beginnen, sind reservierte Namespaces für JQuery.
Syntax
event.namespace
Beispiel
$("p").on("custom.someNamespace", function(event)(
alert(event.namespace);
));
7. PageX
Dies ist die Seitentyp-Eigenschaft, mit der die Position des Mauszeigers zurückgegeben wird, die sich auf die linke Seitenkante des Dokuments bezieht. Diese Art von Eigenschaft wird häufig mit der Veranstaltung verwendet. PageY-Eigenschaft.
Syntax
event.PageX
Beispiel
$(document).mousemove(function(event)(
$("span text ").text("X: " + event.pageX);
));
8. SeiteY
Dies ist die Seitentyp-Eigenschaft, die verwendet wird, um die Position des Mauszeigers zurückzugeben, die sich auf die obere Seitenkante des Dokuments bezieht. Diese Art von Eigenschaft wird häufig mit der Veranstaltung verwendet. PageX-Eigenschaft.
Syntax
event.PageY
Beispiel
$(document).mousemove(function(event)(
$("span text ").text("Y: " + event.pageY);
));
9. Ergebnis
Die event.result -Eigenschaft wird verwendet, um den vorherigen oder den letzten Wert zu enthalten, der vom Ereignishandler zurückgegeben wird, der speziell durch das bestimmte Ereignis ausgelöst wird.
Syntax
event.result
Beispiel
$("button").click(function()(
return "Hi there!";
));
10. preventDefault ()
Diese ereignisbezogene event.preventDefault () -Methode wird verwendet, um die Standardaktion eines bestimmten Elements zu stoppen. Beispiele für dieses Szenario sind:
Verhindert, dass eine Schaltfläche zum Senden eines Formulars gesendet wird
Verhindern Sie, dass ein Link auf eine bestimmte URL zugreift.
Ein bestimmtes Ereignis wie event.preventDefault () wird verwendet, um zu überprüfen, ob die preventDefault () -Methode oder -Funktion zum Aufrufen des Ereignisses verwendet wird.
Syntax
event.preventDefault()
Beispiel
$("a").click(function(event)(
event.preventDefault();
));
11. Event.target ()
Mit dieser Eigenschaft wird zurückgegeben, welches DOM-Element von diesem Ereignis ausgelöst werden soll. Meistens ist es nicht sinnvoll, das event.target mit diesem zu vergleichen, um festzustellen, ob das bestimmte Ereignis aufgrund eines Ereignisses namens bubbling behandelt wird.
Syntax
event.target
Beispiel
$("p, button, h2").click(function(event)(
$("div").html("Hi, triggered is " + event.target.NameNode + " new element.");
));
12. timeStamp
Mit dieser Eigenschaft wird die Anzahl der Millisekunden seit dem 1. Januar 1970 zurückgegeben, die dem ersten Zeitpunkt entspricht, zu dem das Ereignis zum ersten Mal tatsächlich ausgelöst wurde.
Syntax
event.TimeStamp
Beispiel
$("button").click(function(event)(
$("span").text(event.timeStamp);
));
13. Typ
Dies wird verwendet, um das Ereignis und seinen Typ zu überwachen, der ausgelöst wird.
Syntax
event.type
Beispiel:
$("p").on("click dblclick and mouse related events", function(event)(
$("div").html("Event: " + event.type);
));
14. welche ()
Diese Eigenschaft wird verwendet, um die Tastatur- oder Maustaste zurückzugeben, die für das Ereignis gedrückt wurde.
Syntax
event.which
Beispiel
$("input").keydown(function(event)(
$("div").html("Key: " + event.which);
));
15. focus ()
Diese Eigenschaft und der Fokus für dieses Ereignis treten auf, wenn ein Element verwendet wird, um den Fokus zu erhalten, der auftritt, wenn es durch Klicken mit der Maus oder durch Navigieren einer Registerkarte darauf ausgewählt wird. Die focus () -Methode wird verwendet, um das Fokusereignis auszulösen oder eine Funktion anzuhängen, die ausgeführt wird, wenn ein fokusbezogenes Ereignis auftritt.
Syntax
$(selector).focus()
Beispiel
$("input").focus(function()(
$("span").css("display", "inline").fadeOut(200);
));
16. hover ()
Mit dieser Hover-Methode werden zwei Funktionen angegeben, die ausgeführt werden, wenn der Mauszeiger über alle ausgewählten Elemente bewegt wird. Diese Methode löst die Ereignisse mouseleave und mouseenter aus. Wenn nur eine Funktion angegeben ist, wird diese sowohl für das Mausblatt- als auch für das Mauszeigerereignis ausgeführt.
Syntax
$(selector).hover(inFunction, outFunction)
Beispiel
$("p").hover(function()(
$(this).css("background-color", "blank");
), function()(
$(this).css("background-color", "yellow");
));
17. Tastendruck ()
Die Reihenfolge der Ereignisse, die sich auf das Keydown-Ereignis beziehen, ist:
- Keydown: Wird verwendet, wenn der Schlüssel gerade herunterfährt.
- Tastendruck: Dies geschieht, wenn die Taste der Tastatur gedrückt wird
- Keyup: Wie der Name schon sagt, wird dies verwendet, wenn die Taste auf der Oberseite gedrückt wird.
Syntax
$(selector).keydown()
Beispiel
$("input").keydown(function()(
$("input").css("background-color", "black");
));
18. Tastendruck ()
Die Reihenfolge der Ereignisse, die sich auf das Tastendruckereignis beziehen, ist:
- Keydown: Wird verwendet, wenn der Schlüssel gerade herunterfährt.
- Tastendruck: Dies geschieht, wenn die Taste der Tastatur gedrückt wird
- Keyup: Wie der Name schon sagt, wird dies verwendet, wenn die Taste auf der Oberseite gedrückt wird.
Syntax
$(selector).keypress()
Beispiel
$("input").keypress (function()(
$("input").css("background-color", "black");
));
19. keyup ()
Die Reihenfolge der Ereignisse, die sich auf das Keyup-Ereignis beziehen, ist:
- Keydown: Wird verwendet, wenn der Schlüssel gerade herunterfährt.
- Tastendruck: Dies geschieht, wenn die Taste der Tastatur gedrückt wird
- Keyup: Wie der Name schon sagt, wird dies verwendet, wenn die Taste auf der Oberseite gedrückt wird.
Syntax
$(selector).keyup()
Beispiel
$("input").keyup(function()(
$("input").css("background-color", "black");
));
20. Live ()
Diese Methode oder Funktion von lives () der jquery wird verwendet, um einen oder mehrere ereignisbasierte Handler anzuhängen, die insbesondere für die ausgewählten Listen von Elementen verwendet werden sollen, und gibt außerdem die Funktion an, die ausgeführt werden soll, wenn die Ereignisse auftreten. Alle Event-Handler werden mit der live () -Methode verbunden, die sowohl für aktuelle als auch für FUTURE-Elemente funktioniert, die auf der Übereinstimmung der Selektorelemente basieren, die wie ein neues vom Skript erstelltes Element sein können. Die Methode die () kann verwendet werden, um die Methode live () zu zerstören.
Syntax
$(selector).live(event, data, function)
Beispiel
$("button").live("click", function()(
$("p").slideToggle();
));
21. Laden ()
Die load-Methode wird verwendet, um eine Ereignisbehandlungsroutine an das lastbasierte Ereignis anzuhängen. Das Ladeereignis tritt ein, wenn ein angegebenes Ereignis eintritt. Dieses Ereignis tritt ein und funktioniert immer dann, wenn der URL zugeordnete Elemente wie Bild, Frame, Skript, Iframe und das Fensterobjekt vorhanden sind. Das Ladeereignis kann ausgelöst werden oder nicht und hängt vom Browser ab, auch wenn das Bild zwischengespeichert ist. Es gibt auch eine AJAX-Methode, die als load () bezeichnet wird. Die Methode, die aufgerufen wird, hängt von den Parametern ab.
Syntax
$(selector).load(function)
Beispiel
$("img").load(function()(
alert("stuff loaded.");
));
22. Mousedown
Dieses Ereignis tritt nur auf, wenn der linke Mauszeiger über der ausgewählten Liste des Elements gedrückt wird. Die mousedown () -Methode oder -Funktion wird verwendet, um dieses Ereignis auszulösen, das eine Funktion anfügt, und wird ausgeführt, wenn ein mousedown-Ereignis eintritt. Diese Methode wird häufig zusammen mit der mouseup () -Methode verwendet.
Syntax
$(selector).mousedown()
Beispiel
$("div").mousedown(function()(
$(this).after("Down button pressed with mouse.");
));
23. Aus ()
Diese Methode wird verwendet, um einen Ereignishandler zu entfernen, der zusammen mit der Methode on () angehängt wird. Es kann gesagt werden, dass die Methode Unbind (), Die () und Undelegate () ersetzt werden. Diese Methode wird verwendet, um der API eine hohe Konsistenz zu verleihen, und es wird immer empfohlen, diese Methode zu verwenden, da dies zur Vereinfachung der Jquery-Codebasis verwendet wird.
Syntax
$(selector).off(event, selector, function(eventObj), map)
Beispiel
$("button").click(function()(
$("p").off("click");
));
24. mouseenter ()
Dieses Ereignis tritt immer dann auf, wenn sich der Mauszeiger über dem angegebenen Element befindet und es beim Auslösen des mouseenter-Ereignisses eingibt, oder wenn eine Funktion angehängt wird, die beim Auftreten eines mouseenter-basierten Ereignisses ausgeführt werden kann.
Syntax
$(selector).mouseenter()
Beispiel
$("p").mouseenter(function()(
$("p").css("background-color", "black");
));
25. Mausblatt ()
Dieses Ereignis tritt immer dann auf, wenn sich der Mauszeiger über dem angegebenen Element befindet und beim Auslösen des Ereignisses "mouse leaves" verlässt, oder wenn eine Funktion zugeordnet wird, die ausgeführt werden kann, wenn ein mausebasiertes Ereignis auftritt.
Syntax
$(selector).mouseleave()
Beispiel
$("p").mouseleave(function()(
$("p").css("background-color", "black");
));
JQuery ist eine der am häufigsten verwendeten Bibliotheken für die Front-End-Entwicklung. Dies bietet einzigartige Merkmale und eine breite Palette von Funktionen, die dazu beitragen, das Leben von Entwicklern und Mitarbeitern einfach und bequem zu gestalten. Ich hoffe, Ihnen hat unser Artikel gefallen. Weitere Informationen hierzu finden Sie in unserem Blog.
Empfohlene Artikel
Dies ist eine Anleitung zu jQuery-Ereignissen. Hier diskutieren wir die Liste der häufigsten und am häufigsten verwendeten Ereignisse von jQuery mit Syntax und Beispielen. Sie können sich auch die folgenden Artikel ansehen, um mehr zu erfahren -
- jQuery-Effekte
- jQuery-Methoden
- jQuery-Attribute
- Wie installiere ich Jquery?
- Top 8 jQuery-Selektoren mit Code-Implementierung
- Leitfaden zu JQuery-Fortschrittsbalken-Beispielen
- Leitfaden zu verschiedenen JavaScript-Ereignissen