一度に複数の要素にイベントハンドルをアタッチする

Question

div内のすべてのボタンに「クリック」イベントを添付します。この除き：

var div1 = document.getElementById("div1"); 
var elements = div1.getElementsByTagName('button'); 
for(var i = 0, len = elements.length; i < len; i++) { 
    elements[i].onclick = function() { 
     // stuff 
    } 
} 

は純粋なJSに一度にすべてのボタンに「onclickの」関数ハンドラをアタッチする良い方法はありますか？

Answer 1

コードを減らすために、clickHandler関数を定義してこの関数をすべてのボタンに割り当てることができます。

がHTMLCollectionとしない配列でdiv1.getElementsByTagName（ 'ボタン'）の結果。 Array.forEach構文を利用するには、callを使用できます。

例：

var clickHandler = function (e) { 
 
    console.log(this.textContent); 
 
}; 
 

 
var div1 = document.getElementById("div1"); 
 
var elements = div1.getElementsByTagName('button'); 
 
Array.prototype.forEach.call(elements, (ele) => {ele.onclick = clickHandler;});

<div id="div1"> 
 
    <button type="button">Button 1</button> 
 
    <button type="button">Button 2</button> 
 
    <button type="button">Button 3</button> 
 
    <button type="button">Button 4</button> 
 
</div>

：あなたはArrow Functionsを使用できる場合

var clickHandler = function (e) { 
 
    console.log(this.textContent); 
 
}; 
 

 
var div1 = document.getElementById("div1"); 
 
var elements = div1.getElementsByTagName('button'); 
 
Array.prototype.forEach.call(elements, function(ele) { 
 
    ele.onclick = clickHandler 
 
});

<div id="div1"> 
 
    <button type="button">Button 1</button> 
 
    <button type="button">Button 2</button> 
 
    <button type="button">Button 3</button> 
 
    <button type="button">Button 4</button> 
 
</div>

は、彼らだけES6でサポートされている、あなたはもっと自分のコードを圧縮することができます

Answer 2

コメントに記載されているとおり、event delegationを使用できます。その場合、単一のイベントハンドラが、処理したい要素の共通の祖先に追加されます。ハンドラの内部では、イベントの発生元の要素が検査され、処理対象の要素の1つであれば、実際のイベントハンドラロジックが実行されます。ブラウザ、特に古いIEのバージョン間のイベントシステムであっ違いという

var div1 = document.getElementById('div1'); 
div1.onclick = function(event) { 
    if (event.target.nodeName.toLowerCase() !== 'button') { 
    return; 
    } 
    // stuff 
}; 

注：お使いの場合には、それは次のように可能性があり

。それらのバージョンをサポートしたい場合は、それに対処する必要があります。 onclickの代わりにaddEventListenerを使用することもできます。