ottenere l'ID di un elemento che ha chiamato una funzione

Question

Come posso ottenere l'ID di un elemento che ha chiamato una funzione JS?

body.jpg è un'immagine di un cane quando l'utente punta il mouse sullo schermo in diverse parti del corpo viene visualizzata un'immagine ingrandita. L'ID dell'elemento area è identico al nome file dell'immagine meno la cartella e l'estensione.

<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> 

Ho fatto la mia ricerca e sono venuto a SO come ultima risorsa. Preferisco una soluzione che non coinvolga jQuery.

Answer 1

Passare un riferimento all'elemento nella funzione quando viene chiamato:

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

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

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

Answer 2

è possibile codificare la configurazione del gestore in questo modo:

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

Poi this nel gestore farà riferimento alla elemento. Ora, offro l'avvertenza che io sono sicuro al 100% che cosa accade quando hai un gestore in un tag <area>, in gran parte perché non ho visto un tag <area> dentro come una decina di anni. I pensa a dovrebbe darti il ​​tag immagine, ma potrebbe essere sbagliato.

modificare — Sì, è sbagliato - si ottiene il tag <area>, non il <img>. Dovrai quindi ottenere il genitore di quell'elemento (la mappa), quindi trovare l'immagine che lo sta utilizzando (ovvero, lo <img> il cui attributo "usemap" si riferisce al nome della mappa).

modificare nuovamente — tranne che non importa, perché si desidera della zona Durr "id". Scusa per non aver letto correttamente.

Answer 3

So che non vuoi una soluzione jQuery ma compreso javascript all'interno HTML è un grande no no.

Voglio dire che si può fare, ma ci sono un sacco di motivi per cui non si dovrebbe (leggere su javascript discreto se si desidera che i dettagli).

Così nell'interesse di altre persone che potrebbero visitare questa domanda, ecco la soluzione jQuery:

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

Il vantaggio principale è che non mescolare codice JavaScript con l'HTML. Inoltre, è sufficiente scriverlo una sola volta e funzionerà per tutti i tag anziché dover specificare il gestore separatamente.

Un ulteriore vantaggio è che ogni gestore jQuery riceve un oggetto evento che contiene molti dati utili - come la fonte dell'evento, il tipo dell'evento e così via rendendo molto più facile scrivere il tipo di codice che si è dopo.

Infine dal momento che è jQuery non c'è bisogno di pensare a cose cross-browser - un vantaggio importante soprattutto quando si tratta di eventi.

Answer 4

Sono sorpreso che nessuno ha menzionato l'uso di this nel gestore di eventi. Funziona automaticamente nei browser moderni e può essere fatto funzionare in altri browser.Se si utilizza addEventListener o attachEvent per installare il gestore eventi, è possibile assegnare automaticamente all'oggetto l'evento creato l'valore di this.

Inoltre, l'utente di gestori di eventi installati in modo programmatico consente di separare il codice javascript dall'HTML, che è spesso considerato una buona cosa.

Ecco come hai fatto nel codice in javascript pianura:

Rimuovere il onmouseover="zoom()" dal codice HTML e installare il gestore di eventi nel vostro javascript come questo:

// 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 5

si può usare 'questo 'in gestore di eventi:

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

o passarlo oggetto evento al gestore come segue:

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

Si consiglia di utilizzare attachEvent (per IE < 9)/addEventListener (IE9 e altri browser) per allegare eventi. L'esempio sopra è per brevità.

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