Comment obtenir l'ID d'un élément déclenchant un événement ?
Quand une fonction liée à un événement se déclenche, il est possible de récupérer l'identifiant de l'élément ayant déclenché l'é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);
});