Comment obtenir l'ID d'un élément à partir des écouteurs d'événements à l'aide de jQuery et JavaScript ?

Obtention de l'ID de l'élément dans les écouteurs d'événements avec jQuery et JavaScript

Afin de gérer efficacement les interactions d'événements en JavaScript, identifier l'élément responsable de l’événement est crucial. Voici comment récupérer l'ID de l'élément qui a déclenché l'événement à l'aide de jQuery et de JavaScript Vanilla.

Approche jQuery

jQuery fournit une méthode efficace pour accéder à l'élément cible qui déclenché un événement. Dans la fonction d'écoute d'événement, le paramètre event contient plusieurs attributs utiles. L'une de ces propriétés est event.target, qui fait directement référence à l'élément qui a initié l'événement.

Pour récupérer l'ID de l'élément, utilisez simplement la syntaxe suivante :

event.target.id

Exemple :

$(document).ready(function() {
  $("a").click(function(event) {
    alert(event.target.id);
  });
});

JavaScript Vanilla Approche

Alors que jQuery simplifie le processus, Vanilla JavaScript offre un autre moyen d'accéder à l'ID de l'élément déclencheur. L'élément cible actuel est toujours transmis comme premier argument des écouteurs d'événements dans Vanilla JavaScript. Cet argument peut être nommé arbitrairement, mais l'événement est une convention courante.

Pour obtenir l'ID de l'élément, utilisez la syntaxe suivante :

event.target.id

Exemple :

document.addEventListener("click", function(event) {
  alert(event.target.id);
});

Remarque :

Il est essentiel de considérer que l'objet événement n'est pas un objet jQuery dans l'approche JavaScript vanille. Pour utiliser les fonctions jQuery sur l'élément cible, enveloppez-le dans la syntaxe $() :

$(event.target).append(" Clicked");

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!