HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのcurrentTargetイベントプロパティとは？使い方を実例付きで解説

currentTargetイベントプロパティとは

HTMLのcurrentTargetイベントプロパティは、イベントリスナー（イベントハンドラー）が登録されており、そのイベントを実際に処理している要素を取得するために使用されるプロパティです。

以下に構文を示します。

event.currentTarget

戻り値としては、イベントリスナーが設定された要素への参照（Elementオブジェクト）が返されます。

実装例

それでは、currentTargetイベントプロパティを使った具体的なコード例を見てみましょう。

コード

<!DOCTYPE html>
<html>
<body>
<h2>要素を取得する</h2>
<p onclick="myFunction(event)">この行をクリックすると、イベントリスナーによってイベントを処理した要素名を表示するアラートボックスが出ます。</p>
<script>
    function myFunction(event) {
        alert("Element = " + event.currentTarget.nodeName);
    }
</script>
</body>
</html>

実行結果

HTMLのcurrentTargetイベントプロパティとは？使い方を実例付きで解説

上のスクリーンショットに示されているテキストの行をクリックすると、イベントリスナーによってイベントを処理した要素を表示するアラートボックスが立ち上がります。

HTMLのcurrentTargetイベントプロパティとは？使い方を実例付きで解説

この例では、クリックされた<p>要素にonclickイベントハンドラーが登録されているため、event.currentTarget.nodeNameは「P」を返します。

補足：currentTargetとtargetの違い

似たようなプロパティにevent.targetがありますが、両者には次のような違いがあります。

  • event.currentTarget：イベントリスナー（ハンドラー）が登録されている要素を返します。
  • event.target：実際にイベントが発生した要素を返します。

たとえば親子関係のある要素にそれぞれリスナーを設定した場合、イベントバブリングの過程では、currentTargetはハンドラーを持つ親要素を、targetは最初にクリックされた子要素を指します。用途に応じて正しく使い分けましょう。

  1. HTML DOMのtimeStampイベントプロパティとは？使い方とサンプルコードを解説

    HTML DOM timeStampイベントプロパティの概要HTML DOMのtimeStampプロパティは、イベントが生成・発火された時点からの経過時間をミリ秒単位で返します。注意：timeStampは、対象のイベントがイベントシステムによってサポートされている場合にのみ機能します。すべてのイベントで利用できるわけではない点に留意してください。構文時間の値（ミリ秒）を取得するには、以下のように記述します。event.timeStampHTML DOM timeStampプロパティの使用例ここでは、timeStampプロパティを使った簡単なミニゲームの例を紹介します。緑色の「安全エリア」内でカ

  2. HTML DOM Event typeプロパティとは？イベントの種類を取得する方法を実例付きで解説

    HTML DOM Event typeプロパティとはHTML DOMのEvent typeプロパティは、発生したイベントの種類に対応する文字列を返すプロパティです。「click」「keypress」「load」「touchend」など、さまざまなイベントタイプを取得できます。構文イベントの種類を文字列として取得するには、以下のように記述します。event.typeそれでは、Event typeプロパティの具体的な使用例を見ていきましょう。使用例以下のサンプルでは、赤い円形の要素に対して「クリック」または「タッチ」が行われた際に、event.typeでイベントの種類を判定しています。イベントの種