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

ソースコードの説明

以下、JavaScriptコードのポイントなる箇所の説明となります。

getElementsByClassName()では、ページ内からclassの値にmenuを持つ要素の集合(HTMLCollection)を取得しています。

そして、取得した要素の集合をforループで扱い、要素ごとにaddEventListener()を使いクリックイベントを適用しています。

それにより、classの値にmenuを持ついずれかの要素がクリックされた際に、addEventListener()のコールバック関数のmenuClick()が実行されます。

まとめ

今回の例では、同じclassの値をもつ要素に対してクリックイベントを適用しましが、他の要素の集合をforループで扱かったり、他のイベントリスナーを指定することもできます。

参考サイトなど

コメント投稿コメント投稿欄を開く

コメントは、項目欄(*は必須項目)を入力し、「コメントを送信」ボタンをクリックしてください。 (メールアドレスは公開されることはありません。コメントの公開は承認制となります。)

Twitterで返信する場合はこちらから。