javascript - title css

¿Puedo averiguar a través de un método de Javascript, quién / a 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 asignar todas las ID de elementos y luego pasar mi propia ID al método JS al que estoy llamando, pero estaba buscando una mejor manera.

Answer 1

¿Qué hay de pasar una discusión?

foo(id);

Answer 2

Cuando el navegador llama a una función como resultado de un evento DOM, JavaScript pasa un objeto a esa 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() debería 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á al "remitente" el valor del elemento que originó el evento en todos los navegadores.

Ahora, si su <a> contiene elementos secundarios (por ejemplo, una imagen) y uno de ellos fue el elemento real al que se hizo clic, entonces ese elemento se convertirá en el "remitente". Si esto es posible, debe subir el DOM desde el remitente 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 puede acceder a cualquier argumento pasado a la función, incluso si no están declarados, usando la matriz de arguments[] .

Answer 3

La convención aquí es que se refiere al elemento DOM en el que se invoca el controlador. 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
}

Eso debería hacer el truco.

EDITAR: Si se llama a foo desde un controlador onclick explícitamente en el DOM, es decir

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

entonces el contexto original de esto se perderá dentro de foo. Para solucionar esto, puede enlazar la llamada de función al contexto original:

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

Answer 4

Podría pasar el valor del atributo href a la función cuando se llame:

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

Answer 5

no es necesario pasar el elemento como un argumento a su función. puedes usar

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

Answer 6

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

Entonces tu JavaScript sería:

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

Utilice el selector "this" si desea pasar el objeto a la función.