Maison >interface Web >js tutoriel >Exemple d'analyse du délégué et du non-délégué du mécanisme de délégation d'événements JQuery

Exemple d'analyse du délégué et du non-délégué du mécanisme de délégation d'événements JQuery

黄舟original: 2017-06-26 10:07:281212parcourir

Considérez le scénario suivant : s'il y a 3 boutons sous 1 p, et lorsque vous cliquez sur chaque bouton, vous devez imprimer l'ID du bouton actuel.

<p id="parent">
	<input type="button" id="a" value="1"></input>
	<input type="button" id="b" value="2"></input>
	<input type="button" id="c" value="3"></input>
</p>

Méthode 1 : utilisez le sélecteur JQuery pour lier sa propre fonction de gestion des événements à chaque bouton.

$("#parent :button").click(function(){
	alert($(this).attr("id"));
})

Méthode 2 : utilisez le mécanisme de délégation d'événements pour lier uniquement les événements à l'élément parent du bouton.

$("#parent").delegate(":button","click",function(){
	alert($(this).attr("id"));
});

La signature de fonction de l'API déléguée est la suivante :

delegate(selector, [type], [data], fn)

sélecteur :

représente le sélecteur dans JQuery, utilisé pour filtrer les éléments qui déclenchent des événements. Il y a trois boutons a, b et c sous l'élément parent ci-dessus. Si le bouton b est cliqué, son identifiant ne sera pas imprimé. Ensuite, cela peut être réalisé grâce au code suivant :

$("#parent").delegate(":button[id!=&#39;b&#39;]","click",{},function(){
	alert($(this).attr("id"));
});

tapez :

ajouté à Un ou plusieurs événements pour l'élément, avec plusieurs valeurs d'événement séparées par des espaces.

data

La valeur du paramètre transmise à la fonction de gestion des événements .

$("#parent").delegate(":button","click",{name:123},function(event){
	alert(event.data.name);
});

La fonction de gestionnaire appelée lorsqu'un événement se produit.

delegate() possède également une propriété très importante : les gestionnaires d'événements utilisant la méthode délégué() s'appliquent aux éléments qui existent actuellement ou qui seront ajoutés dans le futur.

Dans le code ci-dessous, lorsque nous cliquons sur le bouton de test, un nouveau bouton sera généré lorsque ce bouton nouvellement généré sera cliqué. , son identifiant sera toujours imprimé.

<script src="jquery-1.11.1.js"></script>
<script>
	$(function(){
	
		$("#parent").delegate(":button","click",function(event){
			alert($(this).attr("id"));
		});
		
		
		$("#test").click(function(event){
			$("#parent").append(&#39;<input type="button" id="d" value="4"></input>&#39;);
			
		});
	})
</script>

<body>

	<input type="button" id="test" value="test">
	<p id="parent">
		<input type="button" id="a" value="1"></input>
		<input type="button" id="b" value="2"></input>
		<input type="button" id="c" value="3"></input>
	</p>
</body>

Alors, comment le délégué() fait-il Et alors ? C'est très simple, en utilisant le mécanisme de bouillonnement d'événements en javascript. Lorsqu'un élément enfant génère un événement, si la propagation de cet événement n'est pas interdite , alors l'élément parent percevra également cet événement (le gestionnaire d'événements sur l'élément parent est appelé). Et grâce à l'objet Event , vous pouvez obtenir l'élément qui a initialement déclenché l'événement. Dans le code ci-dessous, nous avons nous-mêmes implémenté un mécanisme simple de délégation d'événements.

<script src="jquery-1.11.1.js"></script>
<script>
	$(function(){
	
		$("#parent").click(":button",function(event){
			
			// target是最初触发事件的DOM元素。
			var domId = event.target.id;
			
			// 过滤元素
			var filter = event.data;

			if($(event.target).is(filter))
			{
				alert(domId);
			}
			
		});
	
	})
</script>

<body>

	<p id="parent">
		<input type="button" id="a" value="1"></input>
		<input type="button" id="b" value="2"></input>
		<input type="button" id="c" value="3"></input>
		<input type="text" id="d" value="d"></input>
	</p>
</body>

déléguer et annuler la délégation sont très similaires pour lier et dissocier. Permettez-moi de le mentionner ici : utilisez annuler la délégation pour. annuler la délégation d'événement Ce faisant, vous pouvez également utiliser le mécanisme d'événement espace de noms . Cet article utilise la liaison et la dissociation comme exemples pour présenter le mécanisme d'espace de noms d'événement et comment l'utiliser en détail.

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée de la différence entre utiliser on au lieu de délégué et vivre dans jQueryArticle suivant：Explication détaillée de la différence entre utiliser on au lieu de délégué et vivre dans jQuery

Articles Liés

Voir plus