Exemple d'analyse du délégué et du non-délégué du mécanisme de délégation d'événements JQuery-js tutoriel-php.cn

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

黄舟

Libérer： 2017-06-26 10:07:28

original

1191 Les gens l'ont consulté

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>

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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!