¿Puedo averiguar por un método de Javascript, quién \ qué elemento DOM me llamó?

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> 

Supongo que podría simplemente asignar todos los ID de elementos y luego pasar mi propia identificación al método JS al que estoy llamando, pero estaba buscando una mejor manera.

Answer 1

¿Qué tal pasar un argumento?

foo(id); 

Answer 2

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

Entonces el JavaScript sería:

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

uso del "este" selector si desea pasar el objeto propio de la función.

Answer 3

Usted podría pasar el valor del atributo href a la función cuando se llama:

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

Answer 4

Cuando el navegador llama a una función como resultado de un evento de DOM, JavaScript pasa un objeto a la función que contiene información sobre el evento. Pero funciona un poco diferente en IE que otros. Para trabajar en todos los navegadores, foo() debe tomar un argumento * (yo 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 primera línea asignará "emisor" el valor del elemento que se originó el evento en todos los navegadores.

Ahora, si su <a> contiene elementos secundarios (por ejemplo, una imagen) y uno de los era el elemento real se hace clic, a continuación, ese elemento se convertirá en el "emisor". Si esto es una posibilidad, es necesario subir el DOM desde el emisor hasta que encuentre su enlace:

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

* También se puede acceder a los argumentos que se pasan a la función, incluso si no se declaran, mediante el uso de la matriz arguments[].

Answer 5

no necesita pasar el elemento como argumento para su función. puede utilizar

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

Answer 6

La convención es que este se refiere al elemento DOM que el controlador se invoca en. Así que si quieres saber el href del enlace:

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

Que debe hacer el truco.

EDIT: Si foo se llama desde una onclick-handler explícitamente en el DOM, es decir

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

entonces el contexto original de este se perderá dentro de foo. Para solucionar esto se puede obligar a la llamada a la función del contexto original:

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