クリックされた子要素から操作を探す：ボタン全体で同じ処理を呼ぼう

ボタンの余白を押したときと、中のアイコンを押したときで結果が違う。クリックされた子要素から操作を探す場面では、押された場所と、処理を登録した場所を分けて考えます。今回はボタンへ直接処理を登録する方法に絞ります。

架空の展示カードに「作品番号を確認する」ボタンを一つ置きます。アイコン、文字、余白のどこから操作しても同じ番号を表示するのが完成条件です。通信や保存処理は含みません。

targetがボタンとは限らない理由を見る

イベントは、クリックなどの操作が起きたという通知です。イベントのtargetはその通知の対象を指します。通常のHTMLのボタンにspanなどの子要素が入っている場合、その子要素を押すとtargetが子要素になることがあります。

そのため、ボタンにだけ付けたidをevent.target.idで読むと、押す場所によって期待した値が得られません。ここでアイコンを削除する前に、処理を登録したボタンを参照する方法へ直します。

MDNのcurrentTargetの説明では、ハンドラーを登録した要素をcurrentTargetで参照できることを確認できます。ハンドラーとは、イベントが起きたときに実行する関数です。

ボタンと出力先を用意する

次のHTMLをbody内へ置きます。ボタンは準備が整うまで無効にし、作品番号はdata-work-idという独自のデータ属性へ持たせます。飾りの記号は読み上げる名前から外し、文字のラベルを残します。

<button id="show-work" type="button" data-work-id="work-03" disabled>
  <span aria-hidden="true">＋</span>
  <span>作品番号を確認する</span>
</button>
<p id="work-result" role="status"></p>

ボタンの代わりにクリックできるdivを作る必要はありません。標準のbuttonを使い、キーボードからも操作を試します。ここではボタン内に別のリンクやボタンを入れません。

登録先のcurrentTargetから番号を読む

次のJavaScriptは、上のHTMLより後ろに置くscript内で一度だけ実行します。外部ファイルへ分けるときは、読み込み順を確認する記事を参照し、要素ができる前に実行しないようにします。

const button = document.querySelector('#show-work');
const result = document.querySelector('#work-result');

if (!button || !result) {
  console.error('ボタンまたは出力先がありません。');
} else {
  button.addEventListener('click', (event) => {
    const id = event.currentTarget.dataset.workId;
    result.textContent = id ? `作品番号：${id}` : '作品番号が未設定です。';
  });
  button.disabled = false;
}

data-work-idの値はdataset.workIdから読みます。表示にはtextContentを使い、文字列をHTMLとして組み立てません。番号を付け忘れた場合も、空白だけで終わらず未設定の案内を出します。

currentTargetを使う理由は、この例ではボタン自身に処理を登録しているからです。親の一覧へまとめて処理を登録する設計では、currentTargetはその親になります。その場合まで同じ一行を流用せず、クリック元からどのボタンを探すかを別に設計してください。

押す場所を変え、同じ番号になるか確かめる

アイコン、文字、ボタンの余白を順に押し、すべて「作品番号：work-03」となるか比べます。検証中にtargetとcurrentTargetを記録するなら、関数内でそれぞれの要素を確認します。currentTargetはイベント処理中に参照する値なので、後で使う必要がある情報は処理中に取り出します。

次にTabキーで移動し、Enterキーやスペースキーでも操作します。フォーカス表示を消すCSSは加えず、どこを操作しているか見える状態で試してください。

押す場所を変えた後、作品番号の未設定も試す

三か所を押した結果を記録したら、練習用コピーでdata-work-idだけを外し、未設定の案内が出るか確認します。変更を戻して再び同じ番号が出れば、参照先とデータの不足を分けて点検できます。

このコードは初期化を一度行うページ向けです。部品を何度も作り直す仕組みへ移す場合は、重複登録を避け、取り外す際のイベント解除も設計します。JavaScriptの無料レッスンでは、まず今回の一つのボタンで、登録先とクリック元を説明できることを目標にしましょう。