web-dev-qa-db-fra.com

Javascript click event handler - comment puis-je obtenir la référence à l'élément cliqué?

Mon HTML:

<div id="x" onclick="clickHandler(event)">
   <div id="button1">This turns green</div>
   <div id="button2">This turns blue</div>
</div>

Donc, tout d'abord, pourquoi suis-je censé passer "événement" dans le gestionnaire de clics et l'événement est-il une sorte de mot-clé système? De plus, comme le gestionnaire de clics est identifié sur la div du conteneur, comment savoir quel bouton a été cliqué?

javascripthtmlevent-handlingclick
22
antonpug

event est un objet Event qui est créé automatiquement lorsqu'un événement est déclenché. Notez que vous n'avez pas à l'appeler event (j'ai tendance à l'appeler simplement e). Cet objet Event possède un certain nombre de propriétés qui décrivent l'événement qu'il représente. Dans ce cas, celui qui vous intéresse serait target, qui montre l'élément qui était la source de l'événement:

function clickHandler(e) {
    var target = e.target;
}

Voici un exemple de travail .

Malheureusement, ce n'est jamais aussi simple que cela. Alors que la spécification indique qu'il devrait être event.target, Internet Explorer aime être différent et choisit d'utiliser event.srcElement, donc vous voudrez probablement cocher pour vous assurer que event.target existe! Par exemple:

function clickHandler(e) {
    var target = (e.target) ? e.target : e.srcElement;
}
44
James Allardice

Je nomme généralement l'élément cliqué dans la liste d'arguments de l'appel au gestionnaire de clics, quelque chose comme (non testé) ceci:

<div id="x">
   <div id="button1" onclick="handle_click_event( this, 'green' )">This turns green</div>
   <div id="button2" onclick="handle_click_event( this, 'blue' )">This turns blue</div>
</div>

function handle_click_event ( obj, new_color ) {
  obj.style.backgroundColor = new_color;
}

Cette approche pourrait-elle fonctionner pour vous?

8
Pete Wilson