web-dev-qa-db-ja.com

eventlistenerを1行の複数の要素に追加する方法

例1

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

例2

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

文法的に正しくないかもしれませんが、2つの要素を別々に記述するのではなく、同じDomメソッドを同時に（同じ行で）与える方法はありますか？

javascriptdommethods
37
Jamisco

さて、あなたができる要素を持つ配列がある場合：

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

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

イベントバブリングはjavascriptの重要な概念であるため、DOMにイベントを直接追加できる場合は、ループを必要とせずにコードを数行保存できます。

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

別のelementsArray変数を定義したくない場合は、2つの要素を持つ名前のない配列からforEachを呼び出すだけです。

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

このソリューションの功績を主張することはできませんが、ここで素晴らしいソリューションを見つけました。

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

これまでに学んだ最も簡単な方法。

// 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

各要素に固有の1つの一意のイベントリスナーを初期化する例。

スライダーを使用して、リアルタイムで値を表示するか、コンソールを確認できます。

<input>要素には、data-whateverというattrタグがあります。これを使用して、各イベントリスナーをさらにカスタマイズできます。

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

ElectronでJavascriptを使用していて、ボタンのリストがある場合、このコードを使用して各ボタンにEventListenerを追加できます。従来のJavascriptメソッド（map（）、forEach（）...）がサポートされなくなったため、実際にこのメソッドを使用しています。

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

例：

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

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