Categories: JavaScript

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

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

実装例1:イベントハンドラに登録する

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

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


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

HTML

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

js

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

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

実装例2:イベントリスナに登録する

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

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


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

HTML

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

js

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

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

実装例3:イベントリスナに登録する2

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

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


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

HTML

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

js

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

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


以上で記事の解説はお終い!

HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ!同僚に差をつけよう!

issiki_wp