Comment la méthode addeventlistener de plusieurs éléments en une seule ligne
Exemple 1
Element1.addEventListener ("input", function() {
this function does stuff
});
Exemple 2
Element1 && Element2.addEventListener("input", function() {
this function does stuff
});
il pourrait ne pas être correcte grammaticalement, mais est-il une manière que je peux donner deux éléments de la même méthode Dom en même temps (même ligne) au lieu d'avoir à les écrire en dehors?
- Double Possible de Ajouter des écouteurs d'événement à plusieurs éléments
- Que faire si vous le stocker à l'intérieur de tableau alors utiliser chaque fonction
Vous devez vous connecter pour publier un commentaire.
Bien, si vous avez un tableau avec les éléments que vous pouvez faire:
elementsArray.forEach(el => el.addEventListener('input', functionThatDoesStuff))
document.getElementsByTagName()
hein? J'ai essayé et ça n'a pas de travail, j'ai dû utiliserquerySelectorAll
. Merci mais pour cela, il a travaillé pour moi!De remontée d'événements est le concept le plus important en javascript, donc si vous pouvez ajouter un événement sur les DOM directement, vous pouvez enregistrer quelques lignes de code, pas besoin de boucle :
Je ne peux pas demander un crédit pour cette solution mais j'ai trouvé une excellente solution ici.
https://www.kirupa.com/html5/handling_events_for_many_elements.htm
Si vous ne voulez pas d'avoir une elementsArray variable définie, vous pourrait simplement appeler forEach à partir d'un tableau sans nom avec les deux éléments.
La façon la plus simple jusqu'à présent, j'ai appris.
Exemple pour l'initialisation d'un unique écouteur d'événement spécifique à chaque élément.
Vous pouvez utiliser le curseur pour afficher les valeurs en temps réel, ou de vérifier la console.
Sur le
<input>
élément j'ai unattr
balise appeléedata-whatever
. Vous pouvez l'utiliser pour personnaliser chaque écouteur d'événement plus loin.JS:
CSS:
HTML:
Exemple: