Obtenir l'ID de l'élément qui a appelé une fonction

Question

Comment puis-je obtenir l'ID d'un élément qui a appelé une fonction JS ?

corps.jpg est l'image d'un chien. Lorsque l'utilisateur pointe sa souris à l'écran sur différentes parties du corps, une image agrandie s'affiche. L'ID de l'élément de la zone est identique au nom de fichier de l'image, à l'exception du dossier et de l'extension.

<div>
    <img src="images/body.jpg" usemap="#anatomy"/>
</div>

<map name="anatomy">
  <area id="nose" shape="rect" coords="280,240,330,275" onmouseover="zoom()"/>
</map>

<script type="text/javascript">
function zoom()
{
 document.getElementById("preview").src="images/nose.jpg";
}
</script>

<div>
<img id="preview"/>
</div>

J'ai fait mes recherches et je suis venu sur Stack Overflow en dernier recours. Je préfère une solution qui n'implique pas jQuery.

Answer 1

Passez une référence à l'élément dans la fonction lorsqu'elle est appelée :

<area id="nose" onmouseover="zoom(this);" />

<script>
  function zoom(ele) {
    var id = ele.id;

    console.log('area element id = ' + id);
  }
</script>

Answer 2

Je suis surpris que personne n'ait mentionné l'utilisation de this dans le gestionnaire d'événements. Il fonctionne automatiquement dans les navigateurs modernes et peut être adapté à d'autres navigateurs. Si vous utilisez addEventListener o attachEvent pour installer votre gestionnaire d'événement, alors vous pouvez rendre la valeur de this est automatiquement attribué à l'objet qui a créé l'événement.

De plus, l'utilisation de gestionnaires d'événements installés de manière programmatique vous permet de séparer le code javascript du HTML, ce qui est souvent considéré comme une bonne chose.

Voici comment faire cela dans votre code en javascript :

Retirer le onmouseover="zoom()" de votre HTML et installez le gestionnaire d'événement dans votre javascript comme ceci :

// simplified utility function to register an event handler cross-browser
function setEventHandler(obj, name, fn) {
    if (typeof obj == "string") {
        obj = document.getElementById(obj);
    }
    if (obj.addEventListener) {
        return(obj.addEventListener(name, fn));
    } else if (obj.attachEvent) {
        return(obj.attachEvent("on" + name, function() {return(fn.call(obj));}));
    }
}

function zoom() {
    // you can use "this" here to refer to the object that caused the event
    // this here will refer to the calling object (which in this case is the <map>)
    console.log(this.id);
    document.getElementById("preview").src="http://photos.smugmug.com/photos/344290962_h6JjS-Ti.jpg";
}

// register your event handler
setEventHandler("nose", "mouseover", zoom);

Answer 3

Vous pouvez utiliser "this" dans le gestionnaire d'événements :

document.getElementById("preview").onmouseover = function() {
    alert(this.id);
}

Ou passez l'objet de l'événement au gestionnaire comme suit :

document.getElementById("preview").onmouseover = function(evt) {
    alert(evt.target.id);
}

Il est recommandé d'utiliser attachEvent(pour IE < 9)/addEventListener(IE9 et autres navigateurs) pour attacher des événements. L'exemple ci-dessus est pour la brièveté.

function myHandler(evt) {
    alert(evt.target.id);
}

var el = document.getElementById("preview");
if (el.addEventListener){
    el.addEventListener('click', myHandler, false); 
} else if (el.attachEvent){
    el.attachEvent('onclick', myHandler);
}

Answer 4

Vous pouvez coder la configuration du gestionnaire comme suit :

<area id="nose" shape="rect" coords="280,240,330,275" onmouseover="zoom.call(this)"/>

Puis this dans votre gestionnaire fera référence à l'élément. Je tiens à préciser que je ne suis pas sûr à 100% de ce qui se passe lorsque vous avez un gestionnaire dans un élément <area> en grande partie parce que je n'ai pas vu une <area> depuis une dizaine d'années. I pensez à cela devrait vous donner la balise de l'image, mais cela pourrait être faux.

modifier - oui, c'est faux - vous obtenez le <area> et non la balise <img> . Vous devrez donc récupérer le parent de cet élément (la carte), puis trouver l'image qui l'utilise (c'est-à-dire l'élément de la carte). <img> dont l'attribut "usemap" fait référence au nom de la carte).

modifier à nouveau - sauf que ça n'a pas d'importance parce que tu veulent l'identité de la zone, durr. Désolé de ne pas avoir lu correctement.

Answer 5

Je sais que vous ne voulez pas d'une solution jQuery mais inclure du javascript dans du HTML est un gros non non.

Vous pouvez le faire, mais il y a de nombreuses raisons pour lesquelles vous ne devriez pas le faire (lisez la section sur le javascript discret si vous voulez en savoir plus).

Donc, dans l'intérêt des autres personnes qui pourraient voir cette question, voici la solution jQuery :

$(document).ready(function() {
  $('area').mouseover(function(event) {
    $('#preview').attr('src', 'images/' + $(event.srcElement).attr('id'));
  });
});

Le principal avantage est que vous ne mélangez pas le code javascript avec le HTML. De plus, vous n'avez besoin d'écrire ce code qu'une seule fois et il fonctionnera pour toutes les balises, au lieu de devoir spécifier le gestionnaire pour chacune d'elles séparément.

Autre avantage, chaque gestionnaire jQuery reçoit un objet événement qui contient de nombreuses données utiles, telles que la source de l'événement, le type d'événement, etc., ce qui facilite grandement l'écriture du type de code recherché.

Enfin, comme il s'agit de jQuery, vous n'avez pas besoin de vous préoccuper des problèmes liés aux navigateurs croisés, ce qui constitue un avantage majeur, surtout lorsqu'il s'agit d'événements.