jQuery-Ereignisgrundlagen

Einführung

Willkommen zur jQuery-Dokumentation! In diesem Lab erhalten Sie eine Einführung in jQuery-Events.

jQuery bietet einfache Methoden zum Anheften von Ereignishandlern an Selektoren. Wenn ein Ereignis auftritt, wird die bereitgestellte Funktion ausgeführt. Innerhalb der Funktion bezieht sich this auf das DOM-Element, das das Ereignis ausgelöst hat.

Die Ereignisbehandlungsfunktion kann ein Ereignisobjekt empfangen. Dieses Objekt kann verwendet werden, um die Natur des Ereignisses zu bestimmen und das Standardverhalten des Ereignisses zu verhindern.

Skills Graph

Einrichten von Ereignisreaktionen auf DOM-Elemente

index.html wurde bereits in der VM bereitgestellt.

Mit jQuery ist es einfach, ereignisgetriebene Reaktionen auf Seitelementen einzurichten. Diese Ereignisse werden oft durch die Interaktion des Endbenutzers mit der Seite ausgelöst, z. B. wenn Text in ein Formularfeld eingegeben wird oder der Mauszeiger bewegt wird. In einigen Fällen, wie den Ereignissen beim Laden und Entladen der Seite, wird das Ereignis von der Browser selbst ausgelöst.

jQuery bietet bequeme Methoden für die meisten nativen Browserereignisse. Diese Methoden - einschließlich .click(), .focus(), .blur(), .change() usw. - sind Kurzschreibweisen für jQuery's .on()-Methode. Die on-Methode ist nützlich, um die gleiche Ereignisbehandlungsfunktion an mehrere Ereignisse zu binden, wenn Sie Daten an den Ereignisbehandler übergeben möchten, wenn Sie mit benutzerdefinierten Ereignissen arbeiten oder wenn Sie ein Objekt mit mehreren Ereignissen und Behandlern übergeben möchten.

// Ereignisaufstellung mit einer bequemen Methode
$("p").click(function () {
  console.log("You clicked a paragraph!");
});

// Äquivalente Ereignisaufstellung mit der `.on()`-Methode
$("p").on("click", function () {
  console.log("click");
});

Klicken Sie bitte auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Erweitern von Ereignissen auf neue Seitelemente

Es ist wichtig zu beachten, dass .on() nur Ereignislistener auf Elementen erstellen kann, die zu dem Zeitpunkt existieren, zu dem Sie die Listener einrichten. Beispielsweise:

$(document).ready(function () {
  // Erstellen Sie jetzt ein neues Buttonelement mit der alert-Klasse.
  $("<button class='alert'>Alert!</button>").appendTo(document.body);
  // Legt das Klickverhalten für alle Buttonelemente mit der alert-Klasse fest,
  // die im DOM existieren, wenn die Anweisung ausgeführt wird
  $("button.alert").on("click", function () {
    console.log("A button with the alert class was clicked!");
  });
});

Wenn ähnliche Elemente nach dem Einrichten der Ereignislistener erstellt werden, übernehmen sie nicht automatisch die zuvor eingerichteten Ereignisverhaltensweisen.

Sie können die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Einrichten mehrerer Ereignisreaktionen

Sehr oft werden Elemente in Ihrer Anwendung an mehrere Ereignisse gebunden. Wenn mehrere Ereignisse die gleiche Behandlungsfunktion teilen sollen, können Sie die Ereignistypen als durch Leerzeichen getrennte Liste an .on() übergeben:

// Mehrere Ereignisse, gleiche Behandler
$("div").on(
  "click change", // Binde Handler für mehrere Ereignisse
  function () {
    console.log("An input was clicked or changed!");
  }
);

Wenn jedes Ereignis seinen eigenen Behandler hat, können Sie einem Objekt in .on() einen oder mehrere Schlüssel-Wert-Paare übergeben, wobei der Schlüssel der Ereignisname und der Wert die Funktion ist, die das Ereignis behandelt.

// Binden mehrerer Ereignisse mit unterschiedlichen Behandlern
$("div").on({
  click: function () {
    console.log("clicked!");
  },
  mouseover: function () {
    console.log("hovered!");
  }
});

Sie können die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Lab zu den Grundlagen von jQuery-Events abgeschlossen. Um mehr über die jQuery-API zu erfahren, besuchen Sie bitte die offizielle jQuery-Dokumentation.