Beispiel für ein JQuery-Delegatenereignis

Die Methode „delegate()“ fügt einen oder mehrere Event-Handler an untergeordnete Elemente des angegebenen Selektors an. Wenn ein Selektor bereitgestellt wird, wird der Ereignishandler als delegiert bezeichnet. Der Selektor kann ein Schaltflächenselektor sein, der Elemente vom Typ „Schaltfläche“ auswählt, ein Kontrollkästchenselektor, der Elemente vom Typ „Kontrollkästchen“ auswählt, ein untergeordneter Selektor, der durch das übergeordnete Element angegebene untergeordnete Elemente auswählt, ein Elementselektor, der alle Elemente mit Tag-Namen auswählt usw.

Es ermöglicht das Anhängen eines einzelnen Ereignis-Listeners an das übergeordnete Element, der für alle untergeordneten Elemente einen passenden Selektor auslöst, der sowohl für aktuelle als auch zukünftige Elemente funktioniert und die Funktion zum Ausführen gewünschter Aktionen bietet. Der Handler wird nicht direkt aufgerufen, wenn das Ereignis auftritt, sondern nur, wenn innere Elemente mit dem Selektor übereinstimmen.

JQuery Delegate()-Syntax

$(selector).delegate(childSelector, event, data, function)

Die Methode „delegate()“ hat folgende Parameter:

  • childSelector: Dies ist ein erforderlicher Parameter. Es wählt untergeordnete Elemente aus, um das vom übergeordneten Element angegebene Ereignis zu verarbeiten.
  • Ereignis: Es handelt sich um einen erforderlichen Parameter, der einen oder mehrere Ereignistypen wie Klick, Tastendruck oder benutzerdefinierte Ereignisnamen für die Ereignisverarbeitung definiert.
  • Daten: Dies ist ein optionaler Parameter, der Daten enthält, die an den Ereignishandler übergeben werden.
  • Funktion: Es handelt sich um einen erforderlichen Parameter, der die Funktion zum Zeitpunkt der Auslösung des Ereignisses ausführt.

Beispiel für JQuery Delegate()

<!DOCTYPE html>
<head>
<meta charset="ISO-8859-1">
<title>Delegate Event</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<script type="text/javascript">
	$(document).ready(function() {
		$("div").delegate("button", "click", function() {
			$("p").slideToggle();
		});
	});
</script>

<body>
	<div>
		<button>Click Delegate Event Run</button>
		<p>Welcome to JQuery !!!!</p>
	</div>
</body>
</html>
  • Wie im obigen Programm gezeigt, haben wir den Code in $(document).ready verwendet, bei dem es sich um ein Ereignis handelt, das ausgelöst wird, wenn das Dokument bereit ist. Es wird ausgeführt, sobald das Seitendokumentobjektmodell für die Ausführung von JavaScript-Code bereit ist.
  • Die Zeile $(„div“).delegate(“button“, „click“, function() ) verwendet drei Parameter, nämlich „button“, das ein untergeordnetes Element zur Ereignisverarbeitung ist, „click“-Parameter, der ein Ereignis zur Ereignisverarbeitung definiert, und „Funktionsparameter“, der ausgeführt wird die Funktion zum Zeitpunkt der Auslösung des Ereignisses.
  • Die Zeile $(“p”).slideToggle() schaltet das Element nach oben und unten.
  • Wenn Sie das Programm ausführen, erhalten Sie die Schaltfläche in der Ausgabe. Wenn Sie auf die Schaltfläche klicken, tritt ein Delegate-Ereignis ein und führt die Funktion aus, wenn das Ereignis ausgelöst wird. Anschließend gleitet das Element mit der Methode slideToggle() nach oben und unten, nachdem auf die Schaltfläche geklickt wurde.

Wenn Sie das obige Beispiel ausführen, erhalten Sie die folgende Ausgabe:

Veranstaltung delegieren

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen