Ereignisziel in JavaScript

  2. How-To's
  3. JavaScript-Anleitungen
  4. Ereignisziel in JavaScript
Muhammad Muzammil Hussain 12 Juli 2022
JavaScript JavaScript Event
Ereignisziel in JavaScript

In diesem Artikel lernen wir die Eigenschaft event.target im JavaScript-Quellcode und den Nutzen dieser Eigenschaft auf der JavaScript-Webseite kennen.

Ereignisziel in JavaScript

Die Eigenschaft event.target hilft dabei, den Namen des HTML-Elements zu finden, das zum Auslösen des Ereignisses verwendet wird. Wenn wir zum Beispiel eine Funktion von einem HTML-Element-Klickereignis aufrufen, können wir den angegebenen Elementnamen zum Auslösen bestimmen und eine Funktion aufrufen.

Um diese Eigenschaft zu erhalten, rufen wir event.target auf und speichern sie in einer Variablen wie let variable = event.target. Jetzt können wir mit dieser Variablen mehrere event.target-Eigenschaften erhalten.

Es gibt eine Referenz auf das Objekt zurück, auf dem das Ereignis aufgetreten ist. Mit Hilfe der Eigenschaft Ziel des Ereignisses können wir die folgenden Aufgaben erledigen.

  1. Wir können das element erhalten, das das Ereignis auslöst.
  2. Wir können auf die Eigenschaften des element zugreifen.
  3. Wir können einige Eigenschaften des Elements leicht ändern.

Moderne Webbrowser unterstützen diese Ziel-Ereigniseigenschaft vollständig.

Grundlegende Syntax:

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

Im folgenden Beispiel verwenden wir das Objekt event.target und die Eigenschaft tagName zusammen, um den Elementnamen zu bestimmen, der zum Auslösen eines Ereignisses beim Klicken verwendet wird, und rufen die deklarierte Funktion auf.

Beispiel:

<!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>

In der obigen HTML-Webseitenquelle haben wir das HTML-Element button verwendet, um ein Ereignis auszulösen und myFunction aufzurufen. In dieser Funktion müssen wir ein Ereignis als Argument erhalten, die Variable myVariable verwenden und die Eigenschaft mithilfe des Ereignisses speichern.

Dann haben wir einfach den Standardwert document.getElementById('myPara').innerHTML verwendet, um dem Absatzelement den Stringtext zuzuweisen. Das Absatzelement haben wir bereits im Body erstellt und ihm die ID myPara zugewiesen.

Wir haben den Tag-Namen mit myVariable.tagName verkettet, um den Elementnamen im Absatz anzuzeigen. Sie können die obige Quelle in der HTML-Erweiterung speichern, im Browser öffnen und das Ergebnis anzeigen.

Verwandter Artikel - JavaScript Event