Detaillierte Erläuterung der jQuery-Verarbeitungsseite events_jquery

Die Einführung von JavaScript in die Ereignisverarbeitung wurde in der vorherigen Dom-Operation erwähnt. Da verschiedene Browser Ereignisse unterschiedlich verarbeiten, bereitet dies den Entwicklern unnötige Probleme. jQuery löst dieses Problem bequem.

1. Bind-Ereignisüberwachung

( http://www.jb51.net/article/60096.htm ) gab eine detaillierte Einführung in die Ereignisüberwachung und erkannte den Unterschied zwischen iE- und DOM-Standardbrowsern bei der Behandlung der Ereignisüberwachung Auch die Reihenfolge und Methode der Ausführung mehrerer Listening-Ereignisse ist unterschiedlich.

In jQuery entspricht das Binden von Ereignissen über bind() dem attachmentEvent() des IE-Browsers und dem addEventListener() des Standard-DOM. Beispiel unten:

Code kopieren Der Code lautet wie folgt: $(function() { $("img") .bind("click", function() { durch }) .bind("click", function() { $("#show").append(" Click Event 2 "); }) .bind("click", function() { durch }); }); Der obige Code bindet drei Click-Listening-Ereignisse an img. Die allgemeine Syntax von

bind() lautet

bind(eventType,[data],Listener) Unter diesen ist eventType die Art des Ereignisses, das Unschärfe/Fokus/Laden/Größe ändern/Bildlauf/Entladen/Klick/Doppelklick/onmousedown/mouseup/onmouseover/onmouseover/onmouseout/mouseenter/onmouseleave/change/select/submit/onkeydown sein kann /keypress/ keyup/error

data ist ein optionaler Parameter, der verwendet wird, um einige spezielle Daten zur Verwendung durch die Listening-Funktion zu übergeben. Der Listener ist eine Event-Listening-Funktion. Im obigen Beispiel wird eine anonyme Funktion verwendet Wenn Sie bei mehreren Ereignistypen dieselbe Überwachungsfunktion verwenden möchten, können Sie diese gleichzeitig zum Ereignistyp hinzufügen und die Ereignisse durch Leerzeichen trennen.

Code kopieren

Der Code lautet wie folgt: $(function() { $("p").bind("mouseenter mouseleave", function() { $(this).toggleClass("over") }) });

Einige andere spezielle Ereignistypen können den Ereignisnamen direkt als Bindungsfunktion verwenden und Parameter als Abhörfunktionen akzeptieren. Zum Beispiel , das schon mehrfach verwendet wurde

Code kopieren

Der Code lautet wie folgt: $("p").click(function(){ //Click-Event-Listening-Funktion hinzufügen }) Unter diesen ist die übliche Syntax

eventTypeName(fn) Zu den verfügbaren EventTypeNames gehört

Unschärfe/Fokus/Laden/Größe ändern/Bildlauf/Entladen/Klick/Doppelklick/onMousedown/OnMouseUp/Mousemove/Mouseover/Mouseout/Ändern/Auswählen/Senden/ Tastendruck/Tastendruck/Tastendruck/Fehler usw.

Zusätzlich zu bind() bietet jQuery auch eine sehr praktische one()-Methode zum Binden von Ereignissen. Diese Methode wird nach einmaliger Bindung automatisch gelöscht und ist nicht mehr wirksam.

Code kopieren Der Code lautet wie folgt: //Erstelle zuerst 10 -Blöcke für (var i = 0; i $(document.body).append($(" Click Me! ")); var iCounter = 1; //Klickereignis mit einem für jedes hinzufügen $("div").one("click", function() { $(this).css({ Hintergrund: „#8f0000“, Farbe: „#FFFFFF“ }).html("Geklickt! " (iCounter)); }); Erstellen Sie im obigen Beispiel beispielsweise 10 Divs und binden Sie ein Funktionsereignis an jedes Div. Wenn auf den Div-Block geklickt wird, wird die Funktion einmal ausgeführt und dann nicht mehr ausgeführt.

2. Ereignis-Listener entfernen

jQuery verwendet unbind(), um Ereignisse zu entfernen. Diese Methode kann zwei optionale Funktionen akzeptieren oder keine Parameter festlegen. Der folgende Code bedeutet beispielsweise, alle Ereignisse von div-Tags und alle Klickereignisse von P-Tags zu entfernen.

Code kopieren Der Code lautet wie folgt: $("p").unbind("click"); $("div").unbind(); Wenn Sie ein bestimmtes Ereignis entfernen möchten, müssen Sie den zweiten Parameter der unbind(eventType, listener)-Methode verwenden, zum Beispiel:

Code kopieren Der Code lautet wie folgt: var myFunc = function() { //Funktionskörper abhören }; $("p").bind("click",myFunc); $("p").unbind("click",myFunc); Zum Beispiel der folgende Code

Code kopieren Der Code lautet wie folgt: $(function() { var fnMyFunc1; //Funktionsvariable $("img") .bind("click", fnMyFunc1 = function() { //Zu Funktionsvariable zuweisen durch }) .bind("click", function() { $("#show").append(" Click Event 2 "); }) .bind("click", function() { durch }); $("input[type=button]").click(function() { $("img").unbind("click", fnMyFunc1); //Ereignisüberwachung myFunc1 entfernen }); });

Zum Beispiel wird im obigen Code die fnMyFunc1-Funktion bind() hinzugefügt und ihr beim Binden die anonyme Funktion zugewiesen, die somit als Name des unbind()-Funktionsaufrufs dient. 3. Übergeben Sie das Ereignisobjekt.

http://www.jb51.net/article/60096.htm Führt das Konzept von Objekten ein und analysiert die häufig verwendeten Attribute und Methoden von Ereignisobjekten. Sie können sehen, dass Ereignisobjekte verwendet werden In verschiedenen Browsern gibt es viele Unterschiede zwischen Timern. In jQuery wird kein Zeitobjekt auf die einzige Weise an die Ereignis-Listener-Funktion übergeben.

Code kopieren

Der Code lautet wie folgt: $(function() { $("p").bind("click", function(e) { // Übergeben Sie das Ereignisobjekt e var sPosPage = "(" e.pageX "," e.pageY ")"; var sPosScreen = "(" e.screenX "," e.screenY ")"; $("span").html(" Page: " sPosPage " Screen: " sPosScreen); }); }); Hier klicken

Der obige Code bindet die Mausklick-Ereignisüberwachungsfunktion an p und übergibt das Ereignisobjekt als Parameter, um den Koordinatenwert des Mausereignis-Auslösepunkts zu erhalten.

Bei Ereignisattributen und -methoden besteht die wichtigste Aufgabe von jQuery darin, Kompatibilitätsprobleme für Entwickler zu lösen.

Eigenschaftsbeschreibung altKey Wenn die Alt-Taste gedrückt wird, ist es wahr, andernfalls ist es falsch ctrlKey Wenn die Strg-Taste gedrückt wird, ist es wahr, andernfalls ist es falsch shiftKey Wenn die Umschalttaste gedrückt wird, ist es wahr, andernfalls ist es falsch keyCode Geben Sie für Keyup- und Keydown-Ereignisse den Wert des Schlüssels zurück (d. h. die Werte von a und A sind gleich, beide sind 65) pageX, pageY Die Position der Maus auf dem Client, ausgenommen Symbolleisten, Bildlaufleisten usw. relationTarget Mausereignisse treten auf, wenn der Mauszeiger ein Element betritt oder verlässt.

screenX, screenY Die Position der Maus auf dem gesamten Bildschirm. Ziel Das Element/Objekt, das das Ereignis verursacht hat Geben Sie den Namen des Ereignisses ein, z. B. Klicken, Mouseover usw. welches Tastaturereignis den Unicode-Wert der Schaltfläche darstellt und welche Maustaste die Maustaste darstellt (1 linke Taste, 2 mittlere Taste, 3 rechte Taste) stopPropagation() verhindert, dass Ereignisse nach oben sprudeln. präventDefault() verhindert das Standardverhalten von Ereignissen

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er Ihnen allen gefällt.