jQuery - Ereignisbehandlung

Wir haben die Möglichkeit, mithilfe von Ereignissen dynamische Webseiten zu erstellen. Ereignisse sind Aktionen, die von Ihrer Webanwendung erkannt werden können.

Es folgen die Beispiele für Ereignisse -

Ein Mausklick
Eine Webseite wird geladen
Maus über ein Element nehmen
Senden eines HTML-Formulars
Ein Tastendruck auf Ihrer Tastatur usw.

Wenn diese Ereignisse ausgelöst werden, können Sie mit einer benutzerdefinierten Funktion so ziemlich alles tun, was Sie mit dem Ereignis wollen. Diese benutzerdefinierten Funktionen rufen Ereignishandler auf.

Binding Event Handler

Mit dem jQuery-Ereignismodell können wir Ereignishandler für DOM-Elemente mit dem einrichten bind() Methode wie folgt -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $('div').bind('click', function( event ){
               alert('Hi there!');
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below to see the result:</p>
		
      <div class = "div" style = "background-color:blue;">ONE</div>
      <div class = "div" style = "background-color:green;">TWO</div>
      <div class = "div" style = "background-color:red;">THREE</div>
   </body>
</html>

Dieser Code bewirkt, dass das Teilungselement auf das Klickereignis reagiert. Wenn ein Benutzer danach in diese Abteilung klickt, wird die Warnung angezeigt.

Dies führt zu folgendem Ergebnis:

Die vollständige Syntax des Befehls bind () lautet wie folgt:

selector.bind( eventType[, eventData], handler)

Es folgt die Beschreibung der Parameter -

eventType- Eine Zeichenfolge, die einen JavaScript-Ereignistyp enthält, z. B. Klicken oder Senden. Im nächsten Abschnitt finden Sie eine vollständige Liste der Ereignistypen.
eventData - Dieser optionale Parameter ist eine Zuordnung von Daten, die an den Ereignishandler übergeben werden.
handler - Eine Funktion, die jedes Mal ausgeführt wird, wenn das Ereignis ausgelöst wird.

Ereignisbehandlungsroutinen entfernen

Sobald ein Ereignishandler eingerichtet ist, bleibt er normalerweise für den Rest der Lebensdauer der Seite wirksam. Möglicherweise müssen Sie den Ereignishandler entfernen.

jQuery bietet die unbind()Befehl zum Entfernen eines bestehenden Ereignishandlers. Die Syntax von unbind () lautet wie folgt:

selector.unbind(eventType, handler)

or 

selector.unbind(eventType)

Es folgt die Beschreibung der Parameter -

eventType- Eine Zeichenfolge, die einen JavaScript-Ereignistyp enthält, z. B. Klicken oder Senden. Im nächsten Abschnitt finden Sie eine vollständige Liste der Ereignistypen.
handler - Identifiziert, falls angegeben, den spezifischen Listener, der entfernt werden soll.

Ereignistypen

Im Folgenden sind plattformübergreifende und empfohlene Ereignistypen aufgeführt, die Sie mit JQuery binden können:

Sr.Nr.	Ereignistyp & Beschreibung
1	blur Tritt auf, wenn das Element den Fokus verliert.
2	change Tritt auf, wenn sich das Element ändert.
3	click Tritt auf, wenn ein Mausklick erfolgt.
4	dblclick Tritt auf, wenn Sie mit der Maus doppelklicken.
5	error Tritt auf, wenn beim Laden oder Entladen usw. ein Fehler auftritt.
6	focus Tritt auf, wenn das Element fokussiert wird.
7	keydown Tritt auf, wenn die Taste gedrückt wird.
8	keypress Tritt auf, wenn die Taste gedrückt und losgelassen wird.
9	keyup Tritt auf, wenn die Taste losgelassen wird.
10	load Tritt auf, wenn ein Dokument geladen wird.
11	mousedown Tritt auf, wenn die Maustaste gedrückt wird.
12	mouseenter Tritt auf, wenn die Maus einen Elementbereich betritt.
13	mouseleave Tritt auf, wenn die Maus einen Elementbereich verlässt.
14	mousemove Tritt auf, wenn sich der Mauszeiger bewegt.
15	mouseout Tritt auf, wenn sich der Mauszeiger aus einem Element herausbewegt.
16	mouseover Tritt auf, wenn sich der Mauszeiger über ein Element bewegt.
17	mouseup Tritt auf, wenn die Maustaste losgelassen wird.
18	resize Tritt auf, wenn die Fenstergröße geändert wird.
19	scroll Tritt auf, wenn das Fenster gescrollt wird.
20	select Tritt auf, wenn ein Text ausgewählt ist.
21	submit Tritt auf, wenn das Formular gesendet wird.
22	unload Tritt auf, wenn Dokumente entladen werden.

Das Ereignisobjekt

Die Rückruffunktion akzeptiert einen einzelnen Parameter. Wenn der Handler aufgerufen wird, wird das JavaScript-Ereignisobjekt durchlaufen.

Das Ereignisobjekt ist häufig nicht erforderlich und der Parameter wird weggelassen, da normalerweise ein ausreichender Kontext verfügbar ist, wenn der Handler genau wissen muss, was zu tun ist, wenn der Handler ausgelöst wird. Es gibt jedoch bestimmte Attribute, auf die zugegriffen werden muss.

Die Ereignisattribute

Die folgenden Ereigniseigenschaften / -attribute sind verfügbar und können plattformunabhängig sicher aufgerufen werden:

Sr.Nr.	Objektbeschreibung
1	altKey Auf true setzen, wenn die Alt-Taste gedrückt wurde, als das Ereignis ausgelöst wurde, wenn nicht, auf false. Die Alt-Taste ist auf den meisten Mac-Tastaturen mit Option gekennzeichnet.
2	ctrlKey Auf true setzen, wenn die Strg-Taste gedrückt wurde, als das Ereignis ausgelöst wurde, wenn nicht, auf false.
3	data Der Wert, falls vorhanden, wurde als zweiter Parameter an den Befehl bind () übergeben, als der Handler eingerichtet wurde.
4	keyCode Bei Keyup- und Keydown-Ereignissen wird die gedrückte Taste zurückgegeben.
5	metaKey Auf true setzen, wenn die Metataste gedrückt wurde, als das Ereignis ausgelöst wurde, wenn nicht, auf false. Die Meta-Taste ist die Strg-Taste auf PCs und die Befehlstaste auf Macs.
6	pageX Gibt bei Mausereignissen die horizontale Koordinate des Ereignisses relativ zum Seitenursprung an.
7	pageY Gibt bei Mausereignissen die vertikale Koordinate des Ereignisses relativ zum Seitenursprung an.
8	relatedTarget Identifiziert bei einigen Mausereignissen das Element, das der Cursor verlassen oder eingegeben hat, als das Ereignis ausgelöst wurde.
9	screenX Gibt bei Mausereignissen die horizontale Koordinate des Ereignisses relativ zum Bildschirmursprung an.
10	screenY Gibt bei Mausereignissen die vertikale Koordinate des Ereignisses relativ zum Bildschirmursprung an.
11	shiftKey Auf true setzen, wenn die Umschalttaste gedrückt wurde, als das Ereignis ausgelöst wurde, wenn nicht, auf false.
12	target Identifiziert das Element, für das das Ereignis ausgelöst wurde.
13	timeStamp Der Zeitstempel (in Millisekunden), zu dem das Ereignis erstellt wurde.
14	type Gibt für alle Ereignisse den Typ des Ereignisses an, das ausgelöst wurde (z. B. Klicken).
15	which Gibt für Tastaturereignisse den numerischen Code für die Taste an, die das Ereignis verursacht hat, und für Mausereignisse, welche Taste gedrückt wurde (1 für links, 2 für Mitte, 3 für rechts).

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $('div').bind('click', function( event ){
               alert('Event type is ' + event.type);
               alert('pageX : ' + event.pageX);
               alert('pageY : ' + event.pageY);
               alert('Target : ' + event.target.innerHTML);
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below to see the result:</p>
		
      <div class = "div" style = "background-color:blue;">ONE</div>
      <div class = "div" style = "background-color:green;">TWO</div>
      <div class = "div" style = "background-color:red;">THREE</div>
   </body>
</html>

Dies führt zu folgendem Ergebnis:

Die Ereignismethoden

Es gibt eine Liste von Methoden, die für ein Ereignisobjekt aufgerufen werden können -

Sr.Nr.	Methode & Beschreibung
1	Standard verhindern() Verhindert, dass der Browser die Standardaktion ausführt.
2	isDefaultPrevented () Gibt zurück, ob event.preventDefault () jemals für dieses Ereignisobjekt aufgerufen wurde.
3	stopPropagation () Stoppt das Sprudeln eines Ereignisses zu übergeordneten Elementen und verhindert, dass übergeordnete Handler über das Ereignis benachrichtigt werden.
4	isPropagationStopped () Gibt zurück, ob event.stopPropagation () jemals für dieses Ereignisobjekt aufgerufen wurde.
5	stopImmediatePropagation () Verhindert, dass der Rest der Handler ausgeführt wird.
6	isImmediatePropagationStopped () Gibt zurück, ob event.stopImmediatePropagation () jemals für dieses Ereignisobjekt aufgerufen wurde.

Methoden zur Ereignismanipulation

In der folgenden Tabelle sind wichtige ereignisbezogene Methoden aufgeführt.

Sr.Nr.	Methode & Beschreibung
1	binden (Typ, [Daten], fn) Bindet einen Handler an ein oder mehrere Ereignisse (z. B. Klick) für jedes übereinstimmende Element. Kann auch benutzerdefinierte Ereignisse binden.
2	aus (events [, selector] [, handler (eventObject)]) Dies macht das Gegenteil von Live, es entfernt ein gebundenes Live-Ereignis.
3	schweben (vorbei, raus) Simuliert das Schweben, indem Sie beispielsweise die Maus auf einem Objekt ein- und ausschalten.
4	on (Ereignisse [, Selektor] [, Daten], Handler) Bindet einen Handler an ein Ereignis (wie einen Klick) für alle aktuellen und zukünftigen übereinstimmenden Elemente. Kann auch benutzerdefinierte Ereignisse binden.
5	eins (Typ, [Daten], fn) Bindet einen Handler an ein oder mehrere Ereignisse, die für jedes übereinstimmende Element einmal ausgeführt werden sollen.
6	bereit (fn) Bindet eine Funktion, die ausgeführt werden soll, wenn das DOM zum Durchlaufen und Bearbeiten bereit ist.
7	Trigger (Ereignis, [Daten]) Löst ein Ereignis für jedes übereinstimmende Element aus.
8	triggerHandler (Ereignis, [Daten]) Löst alle gebundenen Ereignishandler für ein Element aus.
9	aufheben ([Typ], [Fn]) Dies macht das Gegenteil von Binden, es entfernt gebundene Ereignisse von jedem der übereinstimmenden Elemente.

Ereignishilfemethoden

jQuery bietet auch eine Reihe von Ereignishilfefunktionen, mit denen entweder ein Ereignis ausgelöst werden kann, um alle oben genannten Ereignistypen zu binden.

Auslösemethoden

Das Folgende ist ein Beispiel, das das Unschärfeereignis in allen Absätzen auslösen würde -

$("p").blur();

Bindungsmethoden

Es folgt ein Beispiel, das a binden würde click Ereignis auf allen <div> -

$("div").click( function () { 
   // do something here
});

Hier finden Sie eine vollständige Liste aller von jQuery bereitgestellten Unterstützungsmethoden -

Sr.Nr.	Methode & Beschreibung
1	blur( ) Löst das Unschärfeereignis jedes übereinstimmenden Elements aus.
2	blur( fn ) Binden Sie eine Funktion an das Unschärfeereignis jedes übereinstimmenden Elements.
3	change( ) Löst das Änderungsereignis jedes übereinstimmenden Elements aus.
4	change( fn ) Bindet eine Funktion an das Änderungsereignis jedes übereinstimmenden Elements.
5	click( ) Löst das Klickereignis jedes übereinstimmenden Elements aus.
6	click( fn ) Bindet eine Funktion an das Klickereignis jedes übereinstimmenden Elements.
7	dblclick( ) Löst das dblclick-Ereignis jedes übereinstimmenden Elements aus.
8	dblclick( fn ) Bindet eine Funktion an das dblclick-Ereignis jedes übereinstimmenden Elements.
9	error( ) Löst das Fehlerereignis jedes übereinstimmenden Elements aus.
10	error( fn ) Bindet eine Funktion an das Fehlerereignis jedes übereinstimmenden Elements.
11	focus( ) Löst das Fokusereignis jedes übereinstimmenden Elements aus.
12	focus( fn ) Bindet eine Funktion an das Fokusereignis jedes übereinstimmenden Elements.
13	keydown( ) Löst das Keydown-Ereignis jedes übereinstimmenden Elements aus.
14	keydown( fn ) Binden Sie eine Funktion an das Keydown-Ereignis jedes übereinstimmenden Elements.
15	keypress( ) Löst das Tastendruckereignis jedes übereinstimmenden Elements aus.
16	keypress( fn ) Bindet eine Funktion an das Tastendruckereignis jedes übereinstimmenden Elements.
17	keyup( ) Löst das Keyup-Ereignis jedes übereinstimmenden Elements aus.
18	keyup( fn ) Binden Sie eine Funktion an das Keyup-Ereignis jedes übereinstimmenden Elements.
19	load( fn ) Bindet eine Funktion an das Ladeereignis jedes übereinstimmenden Elements.
20	mousedown( fn ) Bindet eine Funktion an das Mousedown-Ereignis jedes übereinstimmenden Elements.
21	mouseenter( fn ) Binden Sie eine Funktion an das mouseenter-Ereignis jedes übereinstimmenden Elements.
22	mouseleave( fn ) Binden Sie eine Funktion an das Mausblattereignis jedes übereinstimmenden Elements.
23	mousemove( fn ) Binden Sie eine Funktion an das Mausbewegungsereignis jedes übereinstimmenden Elements.
24	mouseout( fn ) Binden Sie eine Funktion an das Mouseout-Ereignis jedes übereinstimmenden Elements.
25	mouseover( fn ) Binden Sie eine Funktion an das Mouseover-Ereignis jedes übereinstimmenden Elements.
26	mouseup( fn ) Binden Sie eine Funktion an das Mouseup-Ereignis jedes übereinstimmenden Elements.
27	resize( fn ) Binden Sie eine Funktion an das Größenänderungsereignis jedes übereinstimmenden Elements.
28	scroll( fn ) Binden Sie eine Funktion an das Bildlaufereignis jedes übereinstimmenden Elements.
29	select( ) Lösen Sie das Auswahlereignis jedes übereinstimmenden Elements aus.
30	select( fn ) Binden Sie eine Funktion an das Auswahlereignis jedes übereinstimmenden Elements.
31	submit( ) Lösen Sie das Übermittlungsereignis jedes übereinstimmenden Elements aus.
32	submit( fn ) Binden Sie eine Funktion an das Übermittlungsereignis jedes übereinstimmenden Elements.
33	unload( fn ) Bindet eine Funktion an das Entladeereignis jedes übereinstimmenden Elements.