JavaScript のイベントターゲット

Muhammad Muzammil Hussain 2022年7月12日

JavaScript JavaScript Event

この記事では、JavaScript ソースコードの event.target プロパティと、JavaScriptWeb ページのそのプロパティの利点について学習します。

JavaScript のイベントターゲット

event.target プロパティは、イベントのトリガーに使用される HTML 要素の名前を見つけるのに役立ちます。たとえば、HTML 要素のクリックイベントから関数を呼び出す場合、指定された要素名を決定して、関数をトリガーして呼び出すことができます。

そのプロパティを取得するには、event.target を呼び出し、let variable = event.target のような変数に格納します。これで、その変数を使用して複数の event.target プロパティを取得できます。

イベントが発生したオブジェクトへの参照を返します。イベントの target プロパティを使用して、次のタスクを実行できます。

イベントをトリガーする要素を取得できます。
element プロパティにアクセスできます。
要素のいくつかのプロパティを簡単に変更できます。

最新の Web ブラウザは、このターゲットイベントプロパティを完全にサポートしています。

基本構文：

var property = event.target;
var elementName = property.tagName

次の例では、event.target オブジェクトと tagName プロパティを一緒に使用して、クリック時にイベントをトリガーし、宣言された関数を呼び出すために使用される要素名を決定します。

例：

<!DOCTYPE html>
<html>
   <body onclick="myFunction(event)">
      <h1 style="color:blueviolet">DelftStack Learning</h1>
      <h3>JavaScript Target event property</h3>
      <p>Click on button on this web page in this document to find out the element name which is used to triggered the event.</p>
      <button>Click here</button>
      <p id="myPara"></p>
      <script>
         function myFunction(event) {
             var myVariable = event.target; // get tagert event property
             document.getElementById("myPara").innerHTML = "Event triggered by a " + myVariable.tagName + " element";
         }
      </script>
   </body>
</html>

上記の HTML Web ページのソースでは、HTML 要素ボタンを使用してイベントをトリガーし、myFunction を呼び出しています。その関数では、引数としてイベントを取得し、変数 myVariable を使用して、イベントを使用してプロパティを格納する必要があります。

次に、デフォルトの document.getElementById('myPara').innerHTML を使用して、文字列テキストを段落要素に割り当てました。本文に段落要素を作成し、ID myPara を割り当てました。

タグ名を myVariable.tagName と連結して、段落内の要素名を表示します。上記のソースを HTML 拡張機能に保存し、ブラウザで開いて、結果を確認できます。

JavaScript のイベントターゲット

関連記事 - JavaScript Event