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

Je veux aussi que cela se produise, donc il suffit de passer l'id de l'élément dans la fonction appelée et utilisée 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";
}

Answer 2

Pour d'autres, l'obtention inattendue de l'élément Window, un écueil courant :

<a href="javascript:myfunction(this)">click here</a>

qui couvre en fait this à l'objet Window. Au lieu de cela :

<a href="javascript:nop()" onclick="myfunction(this)">click here</a>

passe le a comme prévu. (nop() est juste une fonction vide quelconque).

Answer 3

Si vous configurez un écouteur comme ceci :

buttons = document.getElementsByClassName("btn-group")
for(let i=0;i<buttons.length;i++){
  buttons[i].addEventListener("click", (e) => { btnClicked(e);},false);
}

alors vous pouvez obtenir l'id comme ceci :

function btnClicked(e){
  console.log(e.target.id)
}