web-dev-qa-db-fra.com

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

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

body.jpg est une image d'un chien lorsque l'utilisateur pointe sa souris autour de l'écran vers différentes parties du corps. Une image agrandie est affichée. L'ID de l'élément area est identique au nom de fichier image moins le dossier et 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 suis venu à Stack Overflow en dernier recours. Je préfère une solution qui n'implique pas jQuery.

javascripteventsdom-events
59
Ambo100

Passez une référence à l'élément dans la fonction quand 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>
79
James Sumners

Je suis surpris que personne n'ait mentionné l'utilisation de this dans le gestionnaire d'événements. Cela fonctionne automatiquement dans les navigateurs modernes et peut être fait pour fonctionner dans d'autres navigateurs. Si vous utilisez addEventListener ou attachEvent pour installer votre gestionnaire d'événements, vous pouvez attribuer automatiquement à la valeur de this l'objet créé l'événement.

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

Voici comment vous feriez cela dans votre code en javascript simple:

Supprimez la onmouseover="zoom()" de votre code HTML et installez le gestionnaire d'événements dans votre code javascript de la manière suivante:

// 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);
9
jfriend00

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

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

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

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

Il est recommandé d'utiliser attachEvent (for IE <9)/addEventListener (IE9 et d'autres navigateurs)) pour attacher des événements. L'exemple ci-dessus est destiné à être bref.

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);
}
4
mixel

Vous pouvez coder la configuration du gestionnaire comme ceci:

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

Ensuite, this dans votre gestionnaire fera référence à l'élément. Maintenant, je tiens à préciser que je ne suis pas sûr à 100% de ce qui se passe lorsque vous avez un gestionnaire dans un <area>tiquette, principalement parce que je n’ai pas vu de <area> tag dans environ une décennie. Je pense que cela devrait vous donner la balise image, mais cela pourrait être faux.

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

éditez à nouveau - sauf que cela n'a pas d'importance, car vous voulez l'identifiant de la zone "did". Désolé de ne pas lire correctement.

2
Pointy

Je sais que vous ne voulez pas de solution jQuery, mais y compris javascript dans HTML, c'est un gros non.

Je veux dire que vous pouvez le faire, mais il y a beaucoup de raisons pour lesquelles vous ne devriez pas (lisez sur javascript discret si vous voulez les détails).

Donc, dans l’intérêt des autres personnes susceptibles de 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 HTML. De plus, vous n’avez besoin d’écrire qu’une fois et cela fonctionnera pour toutes les balises au lieu de devoir spécifier le gestionnaire séparément.

L’avantage supplémentaire est que chaque gestionnaire jQuery reçoit un objet événement contenant de nombreuses données utiles, telles que la source de l’événement, son type, etc., ce qui facilite beaucoup l’écriture du type de code recherché.

Enfin, étant donné que jQuery n’est pas nécessaire, vous n’avez pas besoin de penser à ce qui se passe entre différents navigateurs - un avantage majeur, en particulier lorsqu’il s’agit d’événements.

1
Gregory Mostizky

je veux aussi que cela se produise, il suffit donc de passer l'identifiant de l'élément dans la fonction appelée et utilisé dans mon fichier js:

function copy(i,n)
{
 var range = document.createRange();
range.selectNode(document.getElementById(i));
window.getSelection().removeAllRanges();
window.getSelection().addRange(range); 
document.execCommand('copy');
window.getSelection().removeAllRanges();
document.getElementById(n).value = "Copied";
}
0
Fit Coder