Comment la méthode addeventlistener de plusieurs éléments en une seule ligne

Question

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?

Answer 1

Eh bien, si vous avez un tableau avec les éléments que vous pouvez faire:

let elementsArray = document.querySelectorAll("whatever");

elementsArray.forEach(function(elem) {
    elem.addEventListener("input", function() {
        //this function does stuff
    });
});

Answer 2

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 :

document.addEventListener('click', function(e){
  if(e.target.tagName=="BUTTON"){
   alert('BUTTON CLICKED');
  }
})

Answer 3

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.

[ Element1, Element2 ].forEach(function(element) {
   element.addEventListener("input", function() {
      this function does stuff
   });
});

Answer 4

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

    var theParent = document.querySelector("#theDude");
    theParent.addEventListener("click", doSomething, false);

    function doSomething(e) {
        if (e.target !== e.currentTarget) {
            var clickedItem = e.target.id;
            alert("Hello " + clickedItem);
        }
        e.stopPropagation();
    }

Answer 5

La façon la plus simple jusqu'à présent, j'ai appris.

// Get an array of buttons from the page
var buttons = document.querySelectorAll(".btns");

// Loop through the resulting array
for(var i = 0; i < buttons.length; i++){
  buttons[i].addEventListener("click", function() {
    console.log("Hello World");
  });
}