【JavaScript入門】すべての要素に同じイベントを登録する方法

「すべての要素で同じイベントを登録したい。」この記事では、そんな要望を叶えます。

実装例１：イベントハンドラに登録する
実装例２：イベントリスナに登録する
実装例３：イベントリスナに登録する２

実装例１：イベントハンドラに登録する

以下はdocument.querySelectorAll()を使ってすべてのdiv要素を取得し、ループで一つ一つのdiv要素にonclickハンドラを追加する例です。
果物の名前をクリックすると、その名前をアラートで表示します。

See the Pen
all-elements-add-event by shiakisudev (@shiakisu)
on CodePen.

コードは以下のとおりです。

HTML

<div>リンゴ</div>
<div>バナナ</div>
<div>みかん</div>

//すべてのdiv要素を取得。
const divs = document.querySelectorAll('div');

//取得したすべてのdiv要素にイベントハンドラを登録する。
for (let i = 0; i < divs.length; i++) {
  divs[i].onclick = function(e) {
    alert(divs[i].innerText);
  }
}

実装例２：イベントリスナに登録する

以下はイベントリスナに登録する例です。
この例でもdocument.querySelectorAll()を使ってすべてのdiv要素を取得し、ループで一つ一つのdiv要素にイベントリスナを追加しています。
果物の名前をクリックすると、その名前をアラートで表示します。

See the Pen
all-elements-add-event2 by shiakisudev (@shiakisu)
on CodePen.

コードは以下のとおりです。

HTML

<div>リンゴ</div>
<div>バナナ</div>
<div>みかん</div>

function userPrompt(event){
  alert( event.target.innerText);
}

document.querySelectorAll('div').forEach(e => e.addEventListener('click', userPrompt));

実装例３：イベントリスナに登録する２

実装例２をワンライナーで記述した例です。この例ではalertではなくpromptにしてみました。

See the Pen
all-elements-add-event3 by shiakisudev (@shiakisu)
on CodePen.

コードは以下のとおりです。

HTML

<div>リンゴ</div>
<div>バナナ</div>
<div>みかん</div>

//要素を表示する関数
function promptFruits(event){
  prompt( event.target.innerText);
}

//ワンライナーでイベントリスナを登録。
document.querySelectorAll('div').forEach(e => e.addEventListener('click', promptFruits));