Exemples de principes techniques des compétences de délégation d'événements JavaScript_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 :

Copier le code Le code est le suivant :

• Article 1
post -2">Article 2

• Article 3


• Article 4< ; /li>
  
• Article 5


• Article 6
; /ul>



Nous supposons également que lorsque chaque élément enfant est cliqué, un événement différent se produira. 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 écouter leurs événements nouveaux ou supprimés sera un cauchemar, surtout lorsque votre Lorsque le code qui écoute l'événement est placé dans un autre lieu dans la demande. 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 l'attribut cible de l'objet événement et capturer la référence de 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 :

Copiez le code Le code est le suivant :

// Trouvez l'élément parent et ajoutez un écouteur...
document.getElementById("parent-list").addEventListener("click",function(e) {
// e .target est l'élément cliqué !
// Si l'élément li est cliqué
if(e.target && e.target.nodeName == "LI") {
// Find la cible et l'ID de sortie !
console.log("List item ",e.target.id.replace("post-")," a été cliqué!"
}
}); 🎜>


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 enfants non-li. S'il s'agit d'un élément li, nous avons trouvé la 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 div avec de nombreux éléments enfants à l'intérieur, mais ce qui nous intéresse, c'est la balise A à l'intérieur avec la classe CSS "classA":

Copier le code Le code est le suivant :

// Récupérer l'élément parent DIV, ajouter un écouteur...

document.getElementById("myDiv") .addEventListener ("click",function(e) {
// e.target est l'élément cliqué
if(e.target && e.target.nodeName == "A") {
// Obtenez le nom de la classe CSS
var classes = e.target.className.split(" ");
// Recherchez des correspondances
if(classes) {
// Pour chaque classe CSS, l'élément has. ..
for(var x = 0; x < classes.length; x ) {
// S'il a la classe CSS que nous voulons...
if(classes[x] = = " classA") {
// Bingo !
console.log("Élément d'ancrage cliqué!"

// Maintenant, faites quelque chose ici....

}
}
}

}
});


Dans l'exemple ci-dessus, non seulement les noms de balises sont comparés, mais également les noms de classes CSS. sont 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, cette 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 jQuery et d'autres bibliothèques d'outils 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 !