【JavaScript】クリックイベントを同じclassを持つすべての要素に適用させる例

今回はJavaScriptで、同じclassの値を持つすべての要素に対して、クリックイベントを適用させる例となります。

クリックイベントを同じclassを持つすべての要素に適用させる例

以下、JavaScriptの例となり、classの値にmenuを持つすべての要素に対して、addEventListenerメソッドで同じクリックイベントを適用しています。

document.addEventListener('DOMContentLoaded', function(){
	// 引数に指定したclassの値をもつ要素をすべて取得
	var menus = document.getElementsByClassName('menu');
	// 上記で取得したすべての要素に対してクリックイベントを適用
	for(var i = 0; i < menus.length; i++) {
    	menus[i].addEventListener('click', menuClick, false);
	}
    
    function menuClick(){
		// クリックした際に実行する処理を記述
    }
});

ソースコードの説明

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

上記例では、まず、getElementsByClassNameメソッドで、ページ内からclassの値menuを持つ要素の集合(HTMLCollection)を取得しています。

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

参考サイトなど

コメント投稿またはTwitterで返信

コメントは、以下の項目(*は必須項目)を入力し「コメントを送信」ボタンから送信お願いします。メールアドレスは公開されることはありません。
Twitterで返信する場合はこちらから。

また、コメントは承認制となります。