Share
Es ist wichtig zu wissen, dass Sie beliebig viele Sitten angeben können bereit() Veranstaltungen, wie Sie möchten. Sie sind nicht darauf beschränkt, eine einzelne anzuschließen .bereit() Ereignis zum Dokument. Das bereit() Ereignisse werden in der Reihenfolge ausgeführt, in der sie enthalten sind.
Anmerkungen: Beim Übergeben der jQuery-Funktion kann eine Funktion - z. jQuery (funciton () // Code hier) - ist eine Abkürzung für jQuery (document) .ready ().
Verwendung der binden() Methode - z.B.. jQuery ('a'). bind ('click', function () ) - Sie können den entsprechenden DOM-Elementen beliebige der folgenden Standardhandler hinzufügen.
Accentsconagua
verwischenFokusBelastungGröße ändernscrollenentladenvor dem EntladenklickendblclickMaus nach untenMouseupmousemoveMouseoverMouseoutVeränderungwähleneinreichenTaste nach untenTastendruckkeyupErrorAuf der Grundlage der DOM-Standards stimmen natürlich nur bestimmte Handler mit bestimmten Elementen überein.
Zusätzlich zu dieser Liste von Standardhandlern können Sie auch Hebel nutzen binden() Anpassen von benutzerdefinierten jQuery-Handlern - z. Mouseenter und mouseleave - sowie alle benutzerdefinierten Handler, die Sie erstellen können.
Um Standard-Handler oder benutzerdefinierte Handler zu entfernen, übergeben wir einfach die lösen() method Der Name des Handlers oder der Name des benutzerdefinierten Handlers, der entfernt werden muss - z. jQuery ('a'). Unbindung ('Klick'). Wenn keine Parameter übergeben werden lösen(), Es werden alle Handler entfernt, die mit einem Element verbunden sind.
Diese eben diskutierten Konzepte werden im nachstehenden Codebeispiel ausgedrückt.
Anmerkungen: jQuery bietet mehrere Verknüpfungen zum binden() Methode zur Verwendung mit allen Standard-DOM-Ereignissen, wobei benutzerdefinierte jQuery-Ereignisse wie ausgeschlossen werden Mouseenter und mouseleave. Die Verwendung dieser Abkürzungen beinhaltet einfach, den Namen des Ereignisses als Methodennamen zu ersetzen - z. .klicken(), mouseout (), Fokus().
Sie können mit jQuery unbegrenzte Handler an ein einzelnes DOM-Element anhängen.
jQuery liefert die ein() Ereignisbehandlungsmethode, um ein Ereignis bequem an DOM-Elemente zu binden, die einmal ausgeführt und anschließend entfernt werden. Das ein() Methode ist nur ein Wrapper für binden() und lösen().
Die Abkürzungssyntax - z. .klicken(), mouseout (), und Fokus() - Zum Binden eines Ereignishandlers an ein DOM-Element können auch programmgesteuerte Handler verwendet werden. Verwenden Sie dazu einfach die Shortcut-Ereignismethode, ohne eine Funktion zu übergeben. Theoretisch bedeutet dies, dass wir einen Handler an ein DOM-Element binden und diesen Handler sofort aufrufen können. Im Folgenden zeige ich das über die klicken() Veranstaltung.
Sag Hallo Sag Hallo
Anmerkungen: Es ist auch möglich, die Veranstaltung zu nutzen auslösen() ein Verfahren zum Aufrufen bestimmter Handler - z. jQuery ('a'). click (function () alert ('hi')). trigger ('click'). Dies funktioniert auch mit Namensraum- und benutzerdefinierten Ereignissen.
jQuery normalisiert das Ereignisobjekt gemäß den W3C-Standards. Dies bedeutet, dass Sie sich bei der Übergabe des Ereignisobjekts an einen Funktionshandler nicht um browserspezifische Implementierungen des Ereignisobjekts kümmern müssen (z. B. von Internet Explorer) window.event). Sie können die folgenden Attribute und Methoden des Ereignisobjekts sorgenfrei verwenden, da jQuery das Ereignisobjekt normalisiert.
event.typeevent.targetevent.dataevent.relatedTargetevent.currentTargetevent.pageXevent.pageYevent.resultevent.timeStampevent.preventDefault ()event.isDefaultPrevented ()event.stopPropagation ()event.isPropagationStopped ()event.stopImmediatePropagation ()event.isImmediatePropagationStopped ()Um auf das normalisierte jQuery-Ereignisobjekt zuzugreifen, übergeben Sie einfach die anonyme Funktion, die an eine jQuery-Ereignismethode übergeben wird, einen Parameter mit dem Namen "event" (oder wie auch immer Sie sie aufrufen möchten). Verwenden Sie dann in der anonymen Rückruffunktion den Parameter, um auf das Ereignisobjekt zuzugreifen. Nachfolgend finden Sie ein codiertes Beispiel für dieses Konzept.
Oft haben wir ein Objekt im DOM, das mehrere Funktionen haben muss, die an einen einzelnen Event-Handler gebunden sind. Nehmen wir zum Beispiel den Größenänderungs-Handler. Mit jQuery können wir so viele Funktionen hinzufügen Fenstergröße Handler wie wir wollen. Aber was passiert, wenn wir nur eine dieser Funktionen entfernen müssen, aber nicht alle? Wenn wir verwenden $ (Fenster) .unbind ('resize'), alle Funktionen, die an den Fenstergröße Handler wird entfernt. Durch den Namensraum eines Handlers (z. resize.unique), können wir einer bestimmten Funktion einen eindeutigen Haken zum Entfernen zuweisen.
Im obigen Code fügen wir dem Größenänderungshandler zwei Funktionen hinzu. Das zweite hinzugefügte Größenänderungsereignis (Dokumentreihenfolge) verwendet Ereignis-Namespacing und entfernt dieses Ereignis anschließend sofort mit lösen(). Ich habe dies getan, um den Punkt hervorzuheben, dass die erste angefügte Funktion nicht entfernt wird. Namespace-Ereignisse geben uns die Möglichkeit, eindeutige Funktionen zu benennen und zu entfernen, die demselben Handler für ein einzelnes DOM-Element zugewiesen sind.
Zusätzlich zum Aufheben einer Bindung einer bestimmten Funktion, die einem einzelnen DOM-Element und Handler zugeordnet ist, können wir auch Ereignis-Namespacing verwenden, um exklusiv (using auslösen()) einen bestimmten Handler und eine Funktion, die einem DOM-Element zugeordnet sind. Im folgenden Code werden zwei Klickereignisse hinzugefügt , und dann mit dem Namespacing wird nur einer aufgerufen.
klicken
Anmerkungen: Es gibt keine Begrenzung für die Tiefe oder Anzahl der verwendeten Namespaces - z. resize.layout.headerFooterContent.
Namespacing ist eine großartige Möglichkeit, alle exklusiven Handler zu schützen, aufzurufen und zu entfernen, die ein Plugin möglicherweise benötigt.
Namespacing funktioniert sowohl mit benutzerdefinierten Ereignissen als auch mit Standardereignissen - z. click.unique oder myclick.unique.
Die Delegierung von Ereignissen beruht auf der Weitergabe von Ereignissen (a.k.a. bubbling). Wenn Sie auf eine innerhalb eines , das ist innerhalb eines zum zum
Dies bedeutet, wenn wir ein Klickereignis an a anhängen das ist in der gekapselt event.target) um zu ermitteln, welches Element im DOM tatsächlich dazu geführt hat, dass das Ereignis ausgelöst wurde. Dies gibt uns wiederum einen Hinweis auf das Element, das mit dem Blasen begann.
Auf diese Weise können wir scheinbar vielen DOM-Elementen einen Event-Handler hinzufügen, indem nur ein einziger Event-Handler / eine Deklaration verwendet wird. Das ist äußerst nützlich. Beispielsweise kann eine Tabelle mit 500 Zeilen, in denen für jede Zeile ein Klickereignis erforderlich ist, die Ereignisdelegierung nutzen. Untersuchen Sie den folgenden Code zur Verdeutlichung.
Wenn Sie jetzt auf eine der Aufzählungszeichen der Liste klicken und nicht auf den Link selbst, wissen Sie was? Sie werden am Ende das entfernen event.target ist der , nicht der . Da dies der Fall ist, wird der Elternteil() Methode wird die wenn es von einem angeklickt wird durch die Weitergabe der Elternteil() Methode ein Elementausdruck.
$ (event.target) .parent ('li'). remove (); Der wichtige Punkt hier ist, dass Sie sorgfältig verwalten müssen, was angeklickt wird, wenn der anklickbare Bereich mehrere gekapselte Elemente enthält, da Sie nie genau wissen, wo der Benutzer klicken kann. Aus diesem Grund müssen Sie überprüfen, ob der Klick bei dem Element erfolgt ist, von dem Sie es erwartet haben.
Mit dem Handy Leben() Ereignismethode können Sie Handler an DOM-Elemente binden, die sich derzeit auf einer Webseite befinden, und diejenigen, die noch hinzugefügt werden müssen. Das Leben() Die Methode verwendet die Ereignisdelegation, um sicherzustellen, dass neu hinzugefügte / erstellte DOM-Elemente unabhängig von DOM-Manipulationen oder dynamischen Änderungen am DOM immer auf Ereignishandler reagieren. Verwenden Leben() ist im Wesentlichen eine Abkürzung für das manuelle Einrichten einer Ereignisdelegation. Zum Beispiel mit Leben() Wir könnten eine Schaltfläche erstellen, die eine weitere Schaltfläche auf unbestimmte Zeit erstellt.
Nachdem wir den Code untersucht haben, sollte es offensichtlich sein, dass wir ihn verwenden Leben() Ereignisdelegation auf ein übergeordnetes Element anwenden ( Element im Codebeispiel), so dass jedes dem DOM hinzugefügte Schaltflächenelement immer auf den Click-Handler reagiert.
Um das Live-Event zu entfernen, verwenden Sie einfach die sterben() Verfahren, z.B.. $ ('button'). die ().
Das Konzept zum Mitnehmen ist das Leben() Diese Methode kann verwendet werden, um Ereignisse an DOM-Elemente anzuhängen, die mit AJAX entfernt und hinzugefügt werden. Auf diese Weise müssen Sie auf Ereignisse verzichten, die nach dem ersten Laden der Seite in das DOM eingefügt werden.
Anmerkungen: Leben() unterstützt die folgenden Handler: klicken, dblclick, Maus nach unten, Mouseup, mousemove, Mouseover, Mouseout, Taste nach unten, Tastendruck, keyup.
Leben() funktioniert nur gegen einen Selektor.
Leben() Standardmäßig wird die Weitergabe mit beendet falsch zurückgeben innerhalb der an die gesendeten Funktion Leben() Methode.
Es ist möglich, die Veranstaltung zu bestehen binden() Methode mehrere Eventhandler. Dadurch ist es möglich, dieselbe Funktion einmalig an viele Handler anzulegen. Im folgenden Codebeispiel hängen wir eine einzelne anonyme Rückruffunktion an die Ereignisbehandlungsroutinen click, keypress und size an.
Wenn auf einen Link geklickt oder ein Formular gesendet wird, ruft der Browser die mit diesen Ereignissen verknüpften Standardfunktionen auf. Klicken Sie zum Beispiel auf eine und der Webbrowser versucht, den Wert von zu laden href Attribut im aktuellen Browserfenster. Um zu verhindern, dass der Browser diese Art von Funktionalität ausführt, können Sie das verwenden Standard verhindern() Methode des normalisierten Ereignisobjekts von jQuery.
jQuery
Ereignisse verbreiten sich (auch als Bubble) im DOM. Wenn ein Ereignishandler für ein bestimmtes Element ausgelöst wird, wird der aufgerufene Ereignishandler auch für alle Vorfahrenelemente aufgerufen. Dieses Standardverhalten erleichtert Lösungen wie die Delegierung von Ereignissen. Um dieses standardmäßige Bubbling zu verhindern, können Sie die normalisierte Ereignismethode jQuery verwenden stopPropagation ().
halt
Im obigen Codebeispiel ist der Event-Handler an die Falsch zurückgeben - z. Wenn Sie das kommentieren würden Mit jQuery können Sie Ihre eigenen benutzerdefinierten Ereignisse mithilfe von erstellen Da diese Ereignisse benutzerdefiniert sind und dem Browser nicht bekannt sind, besteht die einzige Möglichkeit, benutzerdefinierte Ereignisse aufzurufen, darin, sie programmgesteuert mithilfe von jQuery auszulösen Standardmäßig Klonen von DOM-Strukturen mithilfe von Durch Anhängen einer Es ist häufig erforderlich, die X- und Y-Koordinaten des Mauszeigers relativ zu einem anderen Element als dem Darstellungsbereich oder dem gesamten Dokument abzurufen. Dies wird normalerweise mit QuickInfos durchgeführt, bei denen die QuickInfo relativ zu der Position angezeigt wird, an der sich der Mauszeiger befindet. Dies kann leicht erreicht werden, indem der Versatz des relativen Elements von den X- und Y-Mauskoordinaten des Ansichtsfensters abgezogen wird.
Abbrechen des Standardverhaltens und der Ereignisausbreitung über
falsch zurückgeben falsch zurückgeben - ist das Äquivalent der Verwendung beider Standard verhindern() und stopPropagation (). Klick mich falsch zurückgeben Anweisung im obigen Code, warnen() wird aufgerufen, weil der Browser standardmäßig den Wert von href. Außerdem würde die Seite aufgrund von Ereignisblubbern zu jQuery.com navigieren.
Benutzerdefinierte Ereignisse erstellen und über Trigger auslösen ()
binden() Methode. Dies geschieht durch die Bereitstellung der binden() Methode mit einem eindeutigen Namen für ein benutzerdefiniertes Ereignis.auslösen() Methode. Untersuchen Sie den folgenden Code für ein Beispiel eines benutzerdefinierten Ereignisses, das mit aufgerufen wird auslösen().
Klonen von Ereignissen sowie DOM-Elementen
Klon() Die Methode klont nicht zusätzlich die Ereignisse, die mit den geklonten DOM-Elementen verknüpft sind. Um die Elemente und die mit den Elementen verknüpften Ereignisse zu klonen, müssen Sie das übergeben Klon() Methode ein boolescher Wert von wahr. Fügen Sie einen weiteren Link hinzu
X- und Y-Koordinaten der Maus im Ansichtsfenster abrufen
mousemove Wenn Sie sich auf die gesamte Seite (Dokument) beziehen, können Sie die X- und Y-Koordinaten des Mauszeigers abrufen, wenn er sich im Ansichtsfenster über die Zeichenfläche bewegt. Dies geschieht durch Abrufen der pageY und pageX Eigenschaften des normalisierten Ereignisobjekts von jQuery.
X- und Y-Koordinaten der Maus relativ zu einem anderen Element erhalten
