JavaScript のイベントターゲット
この記事では、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 拡張機能に保存し、ブラウザで開いて、結果を確認できます。