イベント発生要素のIDを取得：JavaScript、jQuery、DOMイベントの3つの方法

2024-04-04

JavaScript、jQuery、および DOM イベントにおけるイベント発生要素の ID 取得方法

イベントが発生した要素の ID を取得することは、JavaScript、jQuery、および DOM イベント処理において非常に重要なタスクです。この ID を使用して、特定の要素に対してアクションを実行したり、その要素に関する情報を取得したりすることができます。

方法

イベント発生要素の ID を取得するには、いくつかの方法があります。

event.target プロパティは、イベントが発生した要素への参照を保持します。このプロパティを使用して、要素の ID を取得することができます。

function handleClick(event) {
  const elementId = event.target.id;
  // elementId を使用して処理を実行
}

// イベントリスナーの登録
document.getElementById("my-element").addEventListener("click", handleClick);

jQuery の $(this) セレクターを使用する

jQuery を使用している場合は、$(this) セレクターを使用して、イベントが発生した要素を選択することができます。その後、attr() メソッドを使用して、要素の ID 属性を取得することができます。

$("#my-element").on("click", function() {
  const elementId = $(this).attr("id");
  // elementId を使用して処理を実行
});

イベントオブジェクトから ID を直接取得する

イベントオブジェクトは、イベントに関する情報を保持するオブジェクトです。イベントオブジェクトのプロパティを使用して、イベント発生要素の ID を直接取得することができます。

function handleClick(event) {
  const elementId = event.currentTarget.id;
  // elementId を使用して処理を実行
}

// イベントリスナーの登録
document.getElementById("my-element").addEventListener("click", handleClick);

注意事項

イベント発生要素が ID 属性を持っていない場合は、この方法は機能しません。
イベントが発生した要素が親要素からバブルアップしてきた場合、event.target プロパティはバブルアップしてきた要素を参照します。イベント発生要素を取得するには、event.currentTarget プロパティを使用する必要があります。

上記以外にも、イベント発生要素の ID を取得する方法はいくつかあります。詳細は、上記の参考資料を参照してください。

補足

上記のコード例は、基本的な例です。実際の状況に合わせてコードを修正する必要があります。
イベント処理は複雑な場合があり、さまざまな問題が発生する可能性があります。問題が発生した場合は、デバッグツールを使用して原因を調査する必要があります。

HTML

<div id="my-element">
  <button>クリック</button>
</div>

JavaScript

// `event.target` プロパティを使用する
function handleClick(event) {
  const elementId = event.target.id;
  console.log(`イベント発生要素の ID: ${elementId}`);
}

// イベントリスナーの登録
document.getElementById("my-element").addEventListener("click", handleClick);

// jQuery の `$(this)` セレクターを使用する
$("#my-element").on("click", function() {
  const elementId = $(this).attr("id");
  console.log(`イベント発生要素の ID: ${elementId}`);
});

// イベントオブジェクトから ID を直接取得する
function handleClick(event) {
  const elementId = event.currentTarget.id;
  console.log(`イベント発生要素の ID: ${elementId}`);
}

// イベントリスナーの登録
document.getElementById("my-element").addEventListener("click", handleClick);

実行結果

イベント発生要素の ID: my-element
イベント発生要素の ID: my-element
イベント発生要素の ID: my-element

解説

上記のコード例では、3 つの方法を使用してイベント発生要素の ID を取得しています。

最初の方法は、event.target プロパティを使用する方法です。この方法は、イベントが発生した要素への参照を取得し、その要素の ID 属性を取得します。
3 番目の方法は、イベントオブジェクトから ID を直接取得する方法です。この方法は、イベントオブジェクトのプロパティを使用して、イベント発生要素の ID を直接取得します。

注意

イベント発生要素の ID を取得する他の方法

closest() メソッドは、要素とその祖先要素を検索するために使用できます。このメソッドを使用して、イベント発生要素の ID を持つ祖先要素を見つけることができます。

function handleClick(event) {
  const elementId = $(event.target).closest("[id]").attr("id");
  console.log(`イベント発生要素の ID: ${elementId}`);
}

// イベントリスナーの登録
$("#my-element").on("click", handleClick);

イベントオブジェクトの srcElement プロパティを使用する

srcElement プロパティは、イベントが発生した要素への参照を保持します。このプロパティは Internet Explorer でのみ使用できます。

function handleClick(event) {
  const elementId = event.srcElement.id;
  console.log(`イベント発生要素の ID: ${elementId}`);
}

// イベントリスナーの登録
document.getElementById("my-element").addEventListener("click", handleClick);

path プロパティは、イベント発生要素からイベントリスナーが登録されている要素までの要素のリストを保持します。このプロパティを使用して、イベント発生要素の ID を取得することができます。

function handleClick(event) {
  const elementId = event.path[0].id;
  console.log(`イベント発生要素の ID: ${elementId}`);
}

// イベントリスナーの登録
document.getElementById("my-element").addEventListener("click", handleClick);

イベントオブジェクトの composedPath() メソッドを使用する

function handleClick(event) {
  const elementId = event.composedPath()[0].id;
  console.log(`イベント発生要素の ID: ${elementId}`);
}

// イベントリスナーの登録
document.getElementById("my-element").addEventListener("click", handleClick);