【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>
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);
}
}
以下はイベントリスナに登録する例です。
この例でも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));
実装例２をワンライナーで記述した例です。この例では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がオススメ！同僚に差をつけよう！