web-dev-qa-db-fra.com

Comment ajouter eventlistener à plusieurs éléments sur une seule ligne

Exemple 1

Element1.addEventListener ("input", function() {
this function does stuff 
});

Exemple 2

Element1 && Element2.addEventListener("input", function() {
this function does stuff
});

grammaticalement, cela n’est peut-être pas correct, mais y at-il un moyen de donner à deux éléments la même méthode Dom en même temps (même ligne) au lieu de les écrire séparément?

javascriptdommethods
37
Jamisco

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

Event Bubbling est le concept important en javascript. Par conséquent, si vous pouvez ajouter un événement directement sur DOM, vous pouvez enregistrer des lignes de code sans avoir à utiliser de boucle:

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

Si vous ne souhaitez pas définir une variable elementsArray distinct, vous pouvez simplement appeler forEach à partir d'un tableau non nommé contenant les deux éléments.

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

Je ne peux pas demander de 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();
    }
4
daniella

Le moyen le plus simple que j'ai appris jusqu'à présent.

// 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");
  });
}
1
Aldrin Espinosa

Exemple d'initialisation d'un écouteur d'événement unique spécifique à chaque élément.

Vous pouvez utiliser le curseur pour afficher les valeurs en temps réel ou vérifier la console.

Sur le <input> element J'ai une balise attr appelée data-whatever. Vous pouvez l'utiliser pour personnaliser davantage chaque écouteur d'événement.

sliders = document.querySelectorAll("input");
sliders.forEach(item=> {
  item.addEventListener('input', (e) => {
    console.log(`${item.getAttribute("data-whatever")} is this value: ${e.target.value}`);
    item.nextElementSibling.textContent = e.target.value;
  });
})
.wrapper {
  display: flex;
}
span {
  padding-right: 30px;
  margin-left: 5px;
}
* {
  font-size: 12px
}
<div class="wrapper">
  <input type="range" min="1" data-whatever="size" max="800" value="50" id="sliderSize">
  <em>50</em>
  <span>Size</span>
  <br>
  <input type="range" min="1" data-whatever="OriginY" max="800" value="50" id="sliderOriginY">
  <em>50</em>
  <span>OriginY</span>
  <br>
  <input type="range" min="1" data-whatever="OriginX" max="800" value="50" id="sliderOriginX">
  <em>50</em>
  <span>OriginX</span>
</div>
0
Vincent Tang

Si vous utilisez Javascript via Electron et que vous avez une liste de boutons, vous pouvez utiliser ce code pour ajouter un EventListener à chaque bouton. J'utilise cette méthode car les méthodes Javascript classiques (map (), forEach () ...) n'étaient plus supportées.

let buttons = document.getElementsByClassName('className');
for(let i = 0; i<buttons.length; i++){
   buttons[i].addEventListener('click', () => {
      /*put your code here*/
   });
}
0
MrAnyx

Exemple:

const element1 = document.querySelector("#element1");
const element2 = document.querySelector("#element2");

[element1, element2].map(element => element.addEventListener("click", function() {
  /*some expressions :)*/
}))
0
Noman Gul