Principes techniques de la délégation d'événements JavaScript

L'une des technologies les plus en vogue dans le monde de la technologie JavaScript d'aujourd'hui devrait être la « délégation d'événements ». L'utilisation de techniques de délégation d'événements vous permet d'éviter d'ajouter des écouteurs d'événements à des nœuds spécifiques ; les écouteurs d'événements sont plutôt ajoutés à leurs éléments parents. L'écouteur d'événement analysera les événements qui jaillissent des éléments enfants et découvrira de quel élément enfant provient l'événement. Le concept de base est très simple, mais nombreux sont encore ceux qui ne comprennent pas comment fonctionne la délégation événementielle. Ici, je vais expliquer comment fonctionne la délégation d'événements et fournir quelques exemples de délégation d'événements de base en JavaScript pur.

Supposons que nous ayons un élément UL avec plusieurs éléments enfants :

<ul id="parent-list">
	<li id="post-1">Item 1</li>
	<li id="post-2">Item 2</li>
	<li id="post-3">Item 3</li>
	<li id="post-4">Item 4</li>
	<li id="post-5">Item 5</li>
	<li id="post-6">Item 6</li>
</ul>

Nous supposons également que lorsque l'on clique sur chaque élément enfant, un événement différent se produit. Vous pouvez ajouter des écouteurs d'événements à chaque élément li indépendant, mais parfois ces éléments li peuvent être supprimés ou ajoutés, et surveiller leurs événements nouveaux ou supprimés sera un cauchemar, surtout lorsque votre code d'écoute d'événements est placé dans un autre place dans votre candidature. Mais que se passe-t-il si vous placez les auditeurs sur leurs éléments parents ? Comment savoir sur quel élément enfant a été cliqué ?

Simple : lorsque l'événement de l'élément enfant remonte jusqu'à l'élément ul parent, vous pouvez vérifier la propriété cible de l'objet événement pour capturer une référence à l'élément de nœud sur lequel vous avez réellement cliqué. Ce qui suit est un code JavaScript très simple qui démontre le processus de délégation d'événement :

// 找到父元素，添加监听器...
document.getElementById("parent-list").addEventListener("click",function(e) {
	// e.target是被点击的元素!
	// 如果被点击的是li元素
	if(e.target && e.target.nodeName == "LI") {
		// 找到目标，输出ID!
		console.log("List item ",e.target.id.replace("post-")," was clicked!");
	}
});

La première étape consiste à ajouter un écouteur d'événement à l'élément parent. Lorsqu'un événement déclenche l'écouteur, vérifiez la source de l'événement et excluez les événements d'éléments non li enfants. Si c'est un élément li, nous avons trouvé notre cible ! S'il ne s'agit pas d'un élément li, l'événement sera ignoré. Cet exemple est très simple, UL et li sont des combinaisons parent-enfant standards. Expérimentons différentes combinaisons d'éléments. Supposons que nous ayons un élément parent p, qui a de nombreux éléments enfants, mais ce qui nous intéresse est une balise A avec la classe CSS "classA" :

// 获得父元素p, 添加监听器...
document.getElementById("myp").addEventListener("click",function(e) {
	// e.target是被点击的元素
	if(e.target && e.target.nodeName == "A") {
		// 获得CSS类名
		var classes = e.target.className.split(" ");
		// 搜索匹配!
		if(classes) {
			// For every CSS class the element has...
			for(var x = 0; x < classes.length; x++) {
				// If it has the CSS class we want...
				if(classes[x] == "classA") {
					// Bingo!
					console.log("Anchor element clicked!");

					// Now do something here....

				}
			}
		}

	}
});

Dans l'exemple ci-dessus, non seulement les balises sont noms comparés et noms de classes CSS comparés. Même si c'est un peu plus compliqué, cela reste très représentatif. Par exemple, s'il y a une balise span dans une balise A, alors ce span deviendra l'élément cible. À ce stade, nous devons retracer l’arborescence DOM pour savoir s’il contient un élément A.classA.

Étant donné que la plupart des programmeurs utilisent des bibliothèques d'outils telles que jQuery pour gérer les éléments et les événements DOM, je recommande à tout le monde d'utiliser la méthode de délégation d'événements à l'intérieur, car la bibliothèque d'outils ici fournit des méthodes de délégation avancées et une méthode de filtrage des éléments.

J'espère que cet article pourra vous aider à comprendre les principes en coulisses de la délégation d'événements JavaScript, et j'espère que vous ressentirez également la puissante utilisation de la délégation d'événements !

(Anglais : davidwalsh.)

Tutoriel recommandé : "Tutoriel sur les bases de JavaScript"

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!