【JavaScript】クリックイベントを複数の要素に適用させる例|同じclassを持つ要素など
今回はJavaScriptで、指定したすべての要素に対してイベントリスナーを適用させる方法となります。
例では、同じclassの値をもつ要素に対してクリックイベントを適用させます。
【JavaScript】クリックイベントを複数の要素に適用させる例
以下、JavaScriptの例となり、classの値にmenuを持つすべての要素に対して、addEventListener()で同じクリックイベントを適用しています。
document.addEventListener('DOMContentLoaded', function(){
function menuClick(){
// クリックした際に実行する処理を記述
}
// 引数に指定したclassの値をもつ要素をすべて取得
const menus = document.getElementsByClassName('menu');
// 上記で取得したすべての要素に対してクリックイベントを適用
for(let i = 0; i < menus.length; i++) {
menus[i].addEventListener('click', menuClick, false);
}
}, false);
JavaScriptの簡単な説明
以下、JavaScriptのコードの簡単な説明となります。
getElementsByClassName()では、ページ内からclassの値にmenuを持つ要素の集合(HTMLCollection)を取得しています。
そして、取得した要素の集合をforループで扱い、要素ごとにaddEventListener()を使いクリックイベントを適用しています。
それにより、classの値にmenuを持ついずれかの要素がクリックされた際に、addEventListener()のコールバック関数のmenuClick()が実行されます。