JavaScriptで複数の要素にイベントを設定する

JavaScriptで複数の要素に対してイベントを設定する方法をメモ。

サンプルコード

複数の要素にクリックイベントで同じ処理を設定する想定で試してみます。

<a href="" class="test">リンク</a>
<button class="test">ボタン</button>
<span class="test">span</span>

.testに対してイベントを設定します。
for文を使って設定します。

var target = document.querySelectorAll('.test');
for (var i = 0; i < target.length; i++) {
    target[i].addEventListener('click', clickFunction, false);
}
function clickFunction(e) {
    e.preventDefault();
    alert('クリック時の処理');
    console.log(this);
}

これで複数の要素に同じ処理を設定することができました。
複数の要素にイベントを設定するデモページ