JQUERY Trigger () Méthode: Comment créer des événements personnalisés dans jQuery

Dans mon article précédent, comment créer des événements personnalisés dans JavaScript , nous avons discuté des avantages des événements personnalisés et de l'objet de garde natif. Pour récapituler, nous pouvons licencier nos propres événements nommés. La page DemonStation a fourni un formulaire qui a licencié un événement «NewMessage» chaque fois qu'un message valide était soumis. Un certain nombre de gestionnaires peuvent s'abonner à cet événement pour effectuer leurs propres actions. Notre seul problème: la garde n'est pas actuellement prise en charge dans Safari ou Internet Explorer. Il existe des moyens de contourner le problème de compatibilité du navigateur. Une solution consiste à rédiger vos propres fonctions d'encapsulation d'événements qui implémentent les fonctionnalités d'événements personnalisées. Heureusement, il n'y a pas besoin: les événements personnalisés sont pris en charge dans plusieurs bibliothèques JavaScript, y compris jQuery. La méthode .trigger de jQuery est la clé. Vous pouvez déclencher un événement avec un nouveau nom de type et des données arbitraires à tout moment, par exemple

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

Les gestionnaires peuvent désormais souscrire à des événements «NewMessage», par ex.

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

Page de démonstration

Cet exemple démontre le code jQuery: Afficher la page de démonstration des événements personnalisés jQuery Un gestionnaire d'événements standard recherche des soumissions sur un formulaire HTML. La fonction obtient le message actuel et, en supposant qu'il est valide, envoie un nouvel événement «NewMessage».

$("#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()
		});
	}

}

Les gestionnaires peuvent désormais s'abonner aux événements «NewMessage». Les événements ne sont soulevés que s'il y a un message valide:

// 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
	);
}

Le message lui-même peut être extrait de la propriété du message de l'objet événement.

Compatibilité du navigateur

Les méthodes JQuery 1.x s'exécutent dans n'importe quel navigateur, y compris Internet Explorer 6.0 et plus. De toute évidence, c'est un énorme bonus même si le code fonctionne (in-notublement) plus lent que les gardiens indigènes. Cependant, sachez que JQuery 2.0, prévu pour la sortie en 2013, ne prendra pas en charge IE6, 7 et 8. JQuery est populaire, mais les événements personnalisés sont pris en charge dans la plupart des bibliothèques JavaScript, notamment Prototype, Mootools et Yui . Et si vous avez aimé lire ce post, vous aimerez l'apprentissage; L'endroit pour acquérir de nouvelles compétences et techniques de la maîtrise. Les membres ont un accès instantané à tous les livres électroniques de SitePoint et aux cours en ligne interactifs, comme JQuery: Novice to Ninja: Nouveaux coups de pied et astuces. Les commentaires sur cet article sont fermés. Vous avez une question sur jQuery? Pourquoi ne pas le demander sur nos forums?

Des questions fréquemment posées (FAQ) sur les événements personnalisés jQuery

Quels sont les événements personnalisés jQuery et pourquoi sont-ils importants?

Les événements personnalisés jQuery sont des événements définis par l'utilisateur qui permettent aux développeurs de créer et de gérer leurs propres événements en plus des événements standard fournis par jQuery. Ils sont importants car ils fournissent un moyen d'encapsuler un comportement qui peut être réutilisé dans différentes parties d'une application. Cela peut conduire à un code plus propre et plus maintenable en réduisant la duplication et en favorisant la séparation des préoccupations.

Comment créer un événement personnalisé dans jQuery?

La création d'un événement personnalisé dans jQuery est simple. Vous pouvez utiliser la méthode .trigger () pour déclencher un événement personnalisé. Voici un exemple simple:

$ (document) .trigger ('myCustomevent');

Dans cet exemple, 'MyCustomevent' est le nom de l'événement personnalisé.

Comment puis-je transmettre des données à un gestionnaire d'événements personnalisé dans jQuery?

Vous pouvez transmettre des données à un gestionnaire d'événements personnalisé dans jQuery en fournissant un argument supplémentaire à la méthode .trigger (). Cet argument peut être n'importe quel objet JavaScript. Voici un exemple:

$ (document) .trigger ('myCustomevent', {key: 'value'});

Dans cet exemple, l'objet {key: 'value'} est transmis au gestionnaire d'événements.

Comment gérer un événement personnalisé dans jQuery?

Vous pouvez gérer un événement personnalisé dans jQuery en utilisant la méthode .on (). Voici un exemple:

$ (document) .on ('myCustomevent', fonction (événement, données) {
console.log (data.key); // 'value'
}) ;

Dans cet exemple, la fonction fournie à la méthode .on () est le gestionnaire d'événements.

Puis-je empêcher un événement personnalisé de se propager dans jQuery?

Oui, vous pouvez empêcher un événement personnalisé de se propager dans jQuery en appelant la méthode .stoppropagation () sur l'objet événement. Voici un exemple:

$ (document) .on ('myCustomevent', fonction (événement) {
event.stoppropagation ();
});

Dans cet exemple , la méthode stoppropagation () empêche l'événement de bouillonner l'arbre Dom.

Puis-je empêcher l'action par défaut d'un événement personnalisé dans jQuery?

Oui, vous pouvez empêcher l'action par défaut d'un événement personnalisé dans jQuery en appelant la méthode .PreventDefault () sur l'objet Event. Voici un exemple:

$ (document) .on ('myCustomevent', fonction (événement) {
event.PreventDefault ();
});

Dans cet exemple , la méthode empêcherdefault () empêche l'action par défaut associée à l'événement.

Puis-je déclencher un événement personnalisé une seule fois dans jQuery?

Oui, vous ne pouvez déclencher un événement personnalisé qu'une seule fois dans jQuery en utilisant la méthode .one () au lieu de la méthode .on (). Voici un exemple:

$ (document) .one ('myCustomevent', function () {
console.log ('Ceci ne sera enregistré qu'une seule fois.');
});

Dans cet exemple, le gestionnaire d'événements ne sera appelé qu'une seule fois, même si «myCustomevent» est déclenché plusieurs fois.

Puis-je supprimer un gestionnaire d'événements personnalisé Dans jQuery?

Oui, vous pouvez supprimer un gestionnaire d'événements personnalisé dans jQuery en utilisant la méthode .off (). Voici un exemple:

$ (document) .off ('myCustomevent');

Dans cet exemple, tous les gestionnaires de «myCustomevent» sur le document sont supprimés.

Puis-je déclencher un événement personnalisé manuellement dans jQuery?

Oui, vous pouvez déclencher un événement personnalisé manuellement dans jQuery en utilisant la méthode .trigger (). Voici un exemple:

$ (document) .trigger («myCustomevent»);

Dans cet exemple, «MyCustomevent» est déclenché manuellement.

Puis-je lier plusieurs gestionnaires à un événement personnalisé dans jQuery?

Oui, vous pouvez lier plusieurs gestionnaires à un événement personnalisé en jQuery en appelant la méthode .on () plusieurs fois avec le même nom d'événement. Voici un exemple:

$ (document) .on ('myCustomevent', function () {
console.log ('handler 1');
});

$ (document) .on ('myCustomevent', function () {
console.log ('Handler 2 ');
});

Dans cet exemple, les deux gestionnaires seront appelés lorsque «MyCustomevent» sera déclenché.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!