How to addeventlistener to multiple elements in a single line

问题

Example 1

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

Example 2

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

it might not be correct grammatically, but is there a way i can give two elements the same Dom method at the same time (same line) instead of having to write them apart?

回答1:

Well, if you have an array with the elements you could do:

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

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

回答2:

Event Bubbling is the important concept in javascript, so if you can add event on DOM directly, you can save some lines of code, no need for looping :

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

回答3:

If you don't want to have a separate elementsArray variable defined you could just call forEach from an unnamed array with the two elements.

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

回答4:

I cannot claim credit for this solution but I found a great solution here.

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();
    }

回答5:

The easiest way so far I've learned.

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

回答6:

If you are using Javascript through Electron and you have a list of buttons, you can use this code to add an EventListener to each button. I'm actually using this method because classical Javascript methods (map(), forEach() ...) weren't supported anymore.

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

回答7:

One line

document.querySelectorAll("whatever").forEach(elem => elem.addEventListener("input", fn))

回答8:

Example for initializing one unique event listener specific to each element.

You can use the slider to show the values in realtime, or check the console.

On the <input> element I have a attr tag called data-whatever. You can use that to customize each event listener further.

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>

回答9:

Example:

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

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

回答10:

If you have a DOM Collection, I suggest you to use the for ... of

In this MDN web doc you can see the details, but, for example, if you have:

HTMLCollection(6) [a.example, a.example, a.example, a.example, a.example, a.example]

You can:

let arrayElements = document.getElementsByClassName('example');
for (let element of arrayElements) {
    element.addEventListener("click", function() {
        console.log('Whoa! You clicked me')
    });

And ta-dah! ;)

来源：https://stackoverflow.com/questions/40956717/how-to-addeventlistener-to-multiple-elements-in-a-single-line

标签

javascript

dom

methods