Comment obtenir l'ID d'un élément déclenchant un événement ?

La bibliothèque JavaScript JQuery simplifie la gestion des évènements. On peut facilement écrire une fonction liée à un évènement et supportée par tous les navigateurs. Lorsque cette fonction se déclenche, il est possible de récupérer l'identifiant de l'élément ayant déclenché l'évènement.

Chaque fonction liée à un évènement possède comme paramètre l'objet event. Cet objet contient différentes informations à propos de l'évènement. L'attribut target contient l'élément qui a déclenché l'évènement. Pour obtenir son identifiant, il suffit de regarder alors l'attribut event.target.id. Il faut faire attention lors de certains évènements car l'attribut event.target ne correspond pas forcément à l'élément auquel est liée la fonction. C'est notamment le cas avec l'évènement click : si l'élément lié à l'évènement possède des éléments enfants, alors l'attribut event.target correspondra à l'élément enfant sur lequel l'internaute a cliqué pour déclencher l'évènement. Si vous souhaitez récupérer uniquement l'élément lié à l'évènement, vous pouvez utiliser le mot-clé this. L'identifiant sera alors stocké dans l'attribut this.id.



Cliquez sur moi !!!

//Javascript
$(document).ready(function()
{
$(#maDiv).click(function(event)
{
console.log(event.target.id); //Affiche enfantDeMaDiv
console.log(this.id); //Affiche maDiv
});
});

Dans les deux cas, les objets sont des éléments du DOM donc des objets JavaScript. Vous ne pouvez pas utiliser directement les méthodes JQuery. Par exemple le code alert(event.target.attr(id)) ne fonctionnera pas. Il faut encapsuler l'objet dans un objet JQuery en utilisant le mot-clé $ (ou Jquery selon votre configuration) et des parenthèses.

$(#maDiv).click(function(event)
{
//Modifie l'identifiant de l'élément sur lequel l'internaute a cliqué
$(event.target).attr(id, toto);
//Modifie l'identifiant de l'élément auquel la fonction est liée
$(this).attr(id, toto);
});

JQuery