JQuery Trigger () Methode: So erstellen Sie benutzerdefinierte Ereignisse in JQuery

In meinem vorherigen Artikel erstellen Sie benutzerdefinierte Ereignisse in JavaScript Wir haben die Vorteile von benutzerdefinierten Ereignissen und das einheimische CustomEvent -Objekt erörtert. Zusammenfassend können wir unsere eigenen benannten Ereignisse abfeuern. Die DemonStation -Seite stellte ein Formular zur Verfügung, das ein „NewMessage“ -Event abgefeuert hat, wenn eine gültige Nachricht eingereicht wurde. Eine beliebige Anzahl von Handlern kann diese Veranstaltung abonnieren, um ihre eigenen Aktionen auszuführen. Unser einziges Problem: CustomeEvent wird derzeit nicht in Safari oder Internet Explorer unterstützt. Das Problem der Kompatibilität des Browser -Kompatibilität gibt es mit Möglichkeiten. Eine Lösung besteht darin, Ihre eigenen Ereigniskapselungsfunktionen zu schreiben, die benutzerdefinierte Ereignisfunktionen implementieren. Glücklicherweise sind keine Notwendigkeit: Sonderanfertigungen werden in mehreren JavaScript -Bibliotheken, einschließlich JQuery, unterstützt. Die JQuery -TRIGGER -Methode ist der Schlüssel. Sie können ein Ereignis mit einem neuen Typennamen und willkürlichen Daten zu jedem Zeitpunkt auslösen, z.

$.event.trigger({
	type: "newMessage",
	message: "Hello World!",
	time: new Date()
});

Handler können nun „NewMessage“ -Aneignisse abonnieren, z.

$(document).on("newMessage", newMessageHandler);

Demonstrationsseite

Dieses Beispiel zeigt den Jquery -Code: Sehen Sie sich die Demonstrationsseite von Jquery benutzerdefinierten Ereignissen an Ein Standard -Event -Handler sucht nach Einsendungen in einem HTML -Formular. Die Funktion erhält die aktuelle Nachricht und sendet unter der Annahme, dass sie gültig ist, ein neues "NewMessage" -Ereignis.

$("#msgbox").on("submit", SendMessage);

// new message: raise newMessage event
function SendMessage(e) {

	e.preventDefault();
	var msg = $("#msg").val().trim();
	if (msg) {
		$.event.trigger({
			type: "newMessage",
			message: msg,
			time: new Date()
		});
	}

}

Handler können jetzt "NewMessage" -Events abonnieren. Die Ereignisse werden nur angesprochen, wenn eine gültige Nachricht vorhanden ist:

// newMessage event subscribers
$(document).on("newMessage", newMessageHandler);

// newMessage event handler
function newMessageHandler(e) {
	LogEvent(
		"Event subscriber on "+e.currentTarget.nodeName+", "
		+e.time.toLocaleString()+": "+e.message
	);
}

Die Nachricht selbst kann aus der Nachrichteneigenschaft des Ereignisobjekts extrahiert werden.

Browserkompatibilität

JQuery 1.x -Methoden werden in jedem Browser ausgeführt, einschließlich Internet Explorer 6.0 und höher. Offensichtlich ist das ein großer Bonus, auch wenn der Code (unkotisch) langsamer ausgeführt wird als einheimische Customevents. Beachten Sie jedoch, dass JQuery 2.0, der 2013 zur Veröffentlichung geplant ist, IE6, 7 und 8 nicht unterstützen wird. JQuery ist beliebt, aber benutzerdefinierte Veranstaltungen werden in den meisten JavaScript -Bibliotheken, einschließlich Prototypen, Mootools und Yui, unterstützt . Und wenn Sie es genossen haben, diesen Beitrag zu lesen, werden Sie Lernable lieben. Der Ort, um frische Fähigkeiten und Techniken von den Meistern zu erlernen. Mitglieder erhalten sofortigen Zugriff auf alle eBooks und interaktiven Online -Kurse von SitePoint, wie JQuery: Novice to Ninja: New Kicks and Tricks. Kommentare zu diesem Artikel sind geschlossen. Haben Sie eine Frage zu JQuery? Warum nicht in unseren Foren fragen?

häufig gestellte Fragen (FAQs) zu jQuery benutzerdefinierten Ereignissen

Was sind jQuery-benutzerdefinierte Ereignisse und warum sind sie wichtig? Sie sind wichtig, weil sie eine Möglichkeit bieten, Verhalten zu verkapulieren, die in verschiedenen Teilen einer Anwendung wiederverwendet werden können. Dies kann zu einem saubereren, wartbaren Code führen, indem sie die Duplikation verringert und die Trennung von Bedenken fördert.

Wie erstelle ich ein benutzerdefiniertes Ereignis in jQuery? Sie können die Methode .trigger () verwenden, um ein benutzerdefiniertes Ereignis auszulösen. Hier ist ein einfaches Beispiel:

$ (Dokument) .Tigger ('mycustomevent');

In diesem Beispiel ist 'MyCustomevent' der Name des benutzerdefinierten Ereignisses. Wie kann ich Daten an einen benutzerdefinierten Ereignishandler in JQuery übergeben? Methode. Dieses Argument kann jedes JavaScript -Objekt sein. Hier ist ein Beispiel:

$ (Dokument) .trigger ('mycustomevent', {key: 'value'});

In diesem Beispiel ist das Objekt {Schlüssel: 'value'} Übergeben an den Event -Handler. Hier ist ein Beispiel:

$ (Dokument) .on ('MyCustomevent', Funktion (Ereignis, Daten) {
console.log (Data.Key); // 'value'
}) ;

In diesem Beispiel ist die der .on () -Methode bereitgestellte Funktion der Ereignishandler. JQuery? Hier ist ein Beispiel:

$ (Dokument) .on ('MyCustomevent', Funktion (Ereignis) {

Ereignis.Stoppropagation ();

});

In diesem Beispiel Die StopPropagation () -Methode verhindert, dass das Ereignis den DOM -Baum aufbricht.
Ja, Sie können die Standardaktion eines benutzerdefinierten Ereignisses in JQuery verhindern, indem Sie die Methode .PreventDefault () im Ereignisobjekt aufrufen. Hier ist ein Beispiel:

$ (Dokument) .on ('mycustomevent', function (Ereignis) {
Ereignis.PreventDefault ();

});

In diesem Beispiel in diesem Beispiel Die Methode PURDEDEFAULT () verhindert die Standardaktion, die dem Ereignis zugeordnet ist.

Ja, Sie können ein benutzerdefiniertes Ereignis nur einmal in JQuery auslösen, indem Sie die Methode .One () anstelle der .on () -Methode verwenden. Hier ist ein Beispiel:

$ (Dokument) .One ('mycustomevent', function () {
console.log ('Dies wird nur einmal angemeldet.');
});

In diesem Beispiel wird der Ereignishandler nur einmal aufgerufen, auch wenn 'mycustomevent' mehrmals ausgelöst wird.

Kann ich einen benutzerdefinierten Ereignishandler entfernen In jQuery? Hier ist ein Beispiel:

$ (Dokument) .off ('mycustomevent'); Kann ich ein benutzerdefiniertes Ereignis manuell in jQuery auslösen? Hier ist ein Beispiel:

$ (Dokument) .Tigger ('mycustomevent');

Kann ich mehrere Handler an ein benutzerdefiniertes Ereignis in jQuery binden? Hier ist ein Beispiel:

$ (Dokument) .on ('mycustomevent', function () {
console.log ('Handler 1');
});

$ (Dokument) .on ('mycustomevent', function () {
console.log ('Handler 2 ');

Das obige ist der detaillierte Inhalt vonJQuery Trigger () Methode: So erstellen Sie benutzerdefinierte Ereignisse in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!