Posso scoprire da un metodo Javascript chi \ quale elemento DOM mi ha chiamato?

Question

<a onclick ="foo()" href="bar.html" >Link </a> 

<script> 

... 
function foo(){ 
    //I want to know the href property of whoever called me. 
    //something like this.caller.href ?? 
} 

</script> 

Suppongo che potrei semplicemente assegnare tutti gli ID di elementi e quindi passare il mio ID al metodo JS che sto chiamando, ma cercavo un modo migliore.

Answer 1

Come passare un argomento?

foo(id); 

Answer 2

<a onclick="foo(this)" href="bar.html">Link</a> 

Quindi sarebbe il tuo JavaScript:

function foo(ob) { 
    alert(ob.href); //or whatever you want to happen preferably pass an id 
} 

Utilizzare il "questo" di selezione se si desidera passare l'oggetto stesso alla funzione.

Answer 3

Si potrebbe passare il valore dell'attributo href alla funzione quando viene chiamato:

<a href="http://www.example.com" onclick="foo(this.href)">link</a> 

Answer 4

Quando il browser chiama una funzione come il risultato di un evento DOM, JavaScript passa un oggetto a quella funzione che contiene informazioni sull'evento. Ma funziona in modo leggermente diverso in IE rispetto ad altri. Per lavorare in tutti i browser, foo() dovrebbe prendere un argomento * (io uso e):

function foo(e) { 
    var sender = (e && e.target) || (window.event && window.event.srcElement); 
    //sender is the DOM element which was clicked 
    alert(sender.href); //assumes the clicked element was an <a> 
} 

La prima linea assegnerà "mittente" il valore dell'elemento, che ha originato l'evento in tutti i browser.

Ora, se il vostro <a>contiene elementi secondari (ad esempio, un'immagine) e uno di quelli era l'elemento effettivo cliccato, allora questo elemento diventi il ​​"mittente". Se questa è una possibilità, è necessario camminare il DOM dal mittente fino a trovare il tuo link:

function foo(e) { 
    var sender = (e && e.target) || (window.event && window.event.srcElement); 
    //sender is the DOM element which was clicked 

    var myEle = sender; 

    //find the parent node until we hit the <a> 
    while(myEle.tagName.toUpperCase() != 'A') { 
    myEle = myEle.parentNode; 
    } 

    //myEle is now the <a>. sender is still the originator. 
    alert(myEle.href); 
} 

* È inoltre possibile accedere a tutti gli argomenti passati alla funzione, anche se non vengono dichiarati, utilizzando l'array arguments[].

Answer 5

non è necessario passare l'elemento come argomento alla propria funzione. è possibile utilizzare

var a = event.srcElement; 
alert(a.href); 

Answer 6

La convenzione è che questo si riferisce all'elemento DOM che il gestore viene richiamato su. Quindi, se si vuole conoscere il href del collegamento:

function foo() { 
    // Inside foo this will refer to the DOM element if called as an event handler 
    var href = this.href 
} 

Questo dovrebbe fare il trucco.

EDIT: Se foo è chiamata da un onclick-gestore in modo esplicito nel DOM, vale a dire

<a [...] onclick="foo()"> 

poi il contesto originale di questo saranno persi all'interno di foo. Per risolvere questo problema si può legare la chiamata di funzione al contesto originale:

<a [...] onclick="foo.call(this)">