Cible d'événement en JavaScript

Muhammad Muzammil Hussain 12 juillet 2022

JavaScript JavaScript Event

Dans cet article, nous apprendrons la propriété event.target dans le code source JavaScript et les avantages de cette propriété dans la page Web JavaScript.

Cible d’événement en JavaScript

La propriété event.target permet de trouver le nom de l’élément HTML utilisé pour déclencher l’événement. Par exemple, si nous appelons une fonction à partir d’un événement de clic d’élément HTML, nous pouvons déterminer le nom de l’élément spécifié pour déclencher et appeler une fonction.

Pour obtenir cette propriété, nous appelons event.target et la stockons dans une variable comme let variable = event.target. Maintenant, nous pouvons obtenir plusieurs propriétés event.target avec cette variable.

Elle renvoie une référence à l’objet sur lequel l’événement s’est produit. Avec l’aide de la propriété target de l’événement, nous pouvons effectuer les tâches suivantes.

On peut obtenir l'élément qui déclenche l’événement.
Nous pouvons accéder aux propriétés element.
On peut facilement modifier certaines propriétés de l'élément.

Les navigateurs Web modernes prennent entièrement en charge cette propriété d’événement cible.

Syntaxe de base :

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

Dans l’exemple suivant, nous allons utiliser ensemble l’objet event.target et la propriété tagName pour déterminer le nom de l’élément utilisé pour déclencher un événement au clic et appeler la fonction déclarée.

Exemple:

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

Dans la source de page Web HTML ci-dessus, nous avons utilisé le bouton d’élément HTML pour déclencher un événement et appeler myFunction. Dans cette fonction, nous devons obtenir un événement comme argument, utiliser la variable myVariable et stocker la propriété à l’aide de l’événement.

Ensuite, nous avons simplement utilisé la valeur par défaut document.getElementById('myPara').innerHTML pour affecter la chaîne de texte à l’élément de paragraphe. Nous avons déjà créé l’élément paragraphe dans le corps et lui avons attribué l’id myPara.

Nous avons concaténé le nom de la balise avec myVariable.tagName pour afficher le nom de l’élément dans le paragraphe. Vous pouvez enregistrer la source ci-dessus dans l’extension HTML, l’ouvrir dans le navigateur et voir le résultat.

Cible d’événement en JavaScript

Article connexe - JavaScript Event