例1
Element1.addEventListener ("input", function() {
this function does stuff
});
例2
Element1 && Element2.addEventListener("input", function() {
this function does stuff
});
文法的に正しくないかもしれませんが、2つの要素を別々に記述するのではなく、同じDomメソッドを同時に(同じ行で)与える方法はありますか?
さて、あなたができる要素を持つ配列がある場合:
let elementsArray = document.querySelectorAll("whatever");
elementsArray.forEach(function(elem) {
elem.addEventListener("input", function() {
//this function does stuff
});
});
イベントバブリングはjavascriptの重要な概念であるため、DOMにイベントを直接追加できる場合は、ループを必要とせずにコードを数行保存できます。
document.addEventListener('click', function(e){
if(e.target.tagName=="BUTTON"){
alert('BUTTON CLICKED');
}
})
別のelementsArray変数を定義したくない場合は、2つの要素を持つ名前のない配列からforEachを呼び出すだけです。
[ Element1, Element2 ].forEach(function(element) {
element.addEventListener("input", function() {
this function does stuff
});
});
このソリューションの功績を主張することはできませんが、ここで素晴らしいソリューションを見つけました。
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();
}
これまでに学んだ最も簡単な方法。
// 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つの一意のイベントリスナーを初期化する例。
スライダーを使用して、リアルタイムで値を表示するか、コンソールを確認できます。
<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>
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*/
});
}
例:
const element1 = document.querySelector("#element1");
const element2 = document.querySelector("#element2");
[element1, element2].map(element => element.addEventListener("click", function() {
/*some expressions :)*/
}))