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

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

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
});
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.