JavaScript ・ イベント
event.target
イベントが起きた要素を調べる
イベントオブジェクトの target プロパティには、実際にクリックなどの操作をされた要素が入っています。親要素にまとめてイベントを登録する「イベント委譲」でよく使います。
01
サンプルコード
HTML
1<ul id="menu">
2 <li>ブレンド</li>
3 <li>カフェラテ</li>
4 <li>紅茶</li>
5</ul>
6<p id="selected">選んでください</p>
CSS
1li {
2 cursor: pointer;
3}
4li.is-active {
5 color: #b68235;
6 font-weight: bold;
7}
JS
1const menu = document.querySelector('#menu');
2
3menu.addEventListener('click', (event) => {
4 const li = event.target.closest('li');
5 if (!li) return;
6 menu.querySelectorAll('li').forEach((x) => x.classList.remove('is-active'));
7 li.classList.add('is-active');
8 document.querySelector('#selected').textContent = li.textContent + 'を選びました';
9 console.log(event.target);
10});
02
実行結果
ブラウザでの表示項目をクリックすると、選んだ項目が強調されます
コンソール
- console.log() の出力がここに表示されます
03
解説
イベントの関数が受け取る event には、そのイベントの情報が入っています。event.target は、実際にクリックされた要素です。
上の例では、li 1つずつではなく親の ul にだけイベントを登録し、event.target からどの項目が押されたかを判断しています。この方法を「イベント委譲」と呼び、項目が後から増えてもそのまま動きます。
クリックされたのが中の子要素の場合もあるため、closest('li') で目的の要素までさかのぼると確実です。
04
応用例・注意点
イベントオブジェクトの主なプロパティ
| プロパティ | 説明 |
|---|---|
target | 実際に操作された要素 |
currentTarget | イベントを登録した要素 |
type | イベントの種類（click など） |
key | 押されたキー（キーボードイベント） |
clientX / clientY | クリックした位置 |
押されたキーで処理を分ける
keydown イベントの key で、どのキーが押されたか分かります。
HTML
1<input id="search" placeholder="Enterで検索">
JS
1document.querySelector('#search').addEventListener('keydown', (e) => {
2 if (e.key === 'Enter') {
3 console.log('検索：' + e.target.value);
4 }
5});
注意点
- 01target は子要素になることがあるため、closest() で確認せずに使うと意図しない要素を操作してしまいます。
- 02アロー関数ではなく function で書いた場合、this は currentTarget と同じ要素になります。