Quien llamó mi FUNCION???

rockxell · #1 (**permalink**) 04/09/2008, 13:07

Holas a todos...

Les tengo una pregunta para variar...:P, se trata de si es posible de alguna forma ubicar ""QUIEN"" llamó a mi funcion de JAVASCRIPT???

supongamos que tenemos un TD y TEXT aplicando un "onclick" y llama a una funcion delcarda en el head que solamente muestra una alert avisando "unclick", mi pregunta es si es posible que yo sepa cual de los dos elementos llamo a mi funcion???

GRACIAS

David · #2 (**permalink**) 04/09/2008, 13:12

No, no es posible a menos que pases por un parámetro el objeto que llamó a la función.

rockxell · #3 (**permalink**) 04/09/2008, 15:30

GRACIAS...
me lo suponia...

derkenuke · #4 (**permalink**) 04/09/2008, 17:34

Bueno, yo diría que sí se puede. Si se trata de eventos:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> 
<head> 
<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" /> 
<meta name="Author" content="derkeNuke" /> 
<title>Página nueva</title> 
<style type="text/css"> 
 
</style> 
</head> 
 
<body> 
 
<div id="uno" onclick="alerta(event)">uno</div> 
<div id="dos" onclick="alerta(event)">dos</div> 
 
<script type="text/javascript"> 
<!-- 
 
 
function alerta(ev) { 
    var src = window.event ? window.event.srcElement : ev.target; 
    alert( "Has hecho click en la capa con id \""+src.id+"\"" ); 
} 
 
// --> 
</script> 
 
</body> 
</html>

Y si se trata de funciones que llaman a funciones se averigua la función que llamó a la actual con nombreDeLaFuncion.caller.

Saludos.

buzu · #5 (**permalink**) 04/09/2008, 19:12

si, si se puede. No eh probado pero se que si pasas this como parámetro a la función luego puedes capturar ese this y obtener su info...
algo como:

function clickado(cual){

}

<a onclick="clickado(this)">click</a>
Saludos.

caricatos · #6 (**permalink**) 04/09/2008, 19:26

Hola:

Sí que se puede, pero averiguarlo a veces es bastante complejo... me refiero a asignaciones dinámicas de eventos (addEventListener/attachEvent)... creo que en safari puede obtenerse como generador del evento un nodo de texto... y no hablemos del burbujeo

Saludos

Panino5001 · #7 (**permalink**) 05/09/2008, 06:28

Un par de matices. Esto no es del todo práctico, ya que dependiendo del donde hagamos click podemos obtener resultados inesperados. En este html es bastante visible, ya que si hacemos click sobre el texto obtenemos span, cuando nuestro objetivo era en realidad el tag div, que es donde asignamos el evento:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" />
<meta name="Author" content="derkeNuke" />
<title>P&#225;gina nueva</title>
<style type="text/css">

</style>
</head>

<body>

<div id="uno" onclick="alerta(event)"><span>uno</span></div>
<div id="dos" onclick="alerta(event)"><span>dos</span></div>

<script type="text/javascript">
<!--


function alerta(ev) {
    var src = window.event ? window.event.srcElement : ev.target;
    alert( "Has hecho click en el elemento \""+src.nodeName+"\"" );
    //devuelve span o div
}

// -->
</script>

</body>
</html>

Tampoco podemos usar this dentro de la función que maneja el evento, porque this no tiene sentido en ese contexto:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" />
<meta name="Author" content="derkeNuke" />
<title>P&#225;gina nueva</title>
<style type="text/css">

</style>
</head>

<body>

<div id="uno" onclick="alerta(event)"><span>uno</span></div>
<div id="dos" onclick="alerta(event)"><span>dos</span></div>

<script type="text/javascript">
<!--


function alerta(ev) {
    alert( "Has hecho click en el elemento \""+this.nodeName+"\"" );
    //devuelve undefined
}

// -->
</script>

</body>
</html>

Ahora, si aplicamos la función addEvent de Scott Andrew y usamos this, en este caso funciona bien en todos los navegadores excepto en Explorer, para el cual this sigue sin tener sentido:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" />
<meta name="Author" content="derkeNuke" />
<title>P&#225;gina nueva</title>

</head>

<body>

<div id="uno"><span>uno</span></div>
<div id="dos"><span>dos</span></div>

<script type="text/javascript">
<!--

function addEvent(elm, evType, fn, useCapture) {
    if (elm.addEventListener) {
        elm.addEventListener(evType, fn, useCapture);
        return true;
    }
    else if (elm.attachEvent) {
        var r = elm.attachEvent('on' + evType, fn);
        return r;
    }
    else {
        elm['on' + evType] = fn;
    }
}

function alerta(ev) {
    alert( "Has hecho click en el elemento \""+this.nodeName+"\"" );
    //devuelve undefined en explorer y div en resto
}

addEvent(document.getElementById('uno'), 'click', alerta, false);
addEvent(document.getElementById('dos'), 'click', alerta, false);
// -->
</script>

</body>
</html>

Y con la misma función, pero sin this e intentando referenciar el elemento dependiendo de srcElement o target, volvemos a la misma indefinición de antes: en un caso entrega div, en otro span, pese a haber asignado la función manejadora a el elemento div:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" />
<meta name="Author" content="derkeNuke" />
<title>P&#225;gina nueva</title>

</head>

<body>

<div id="uno"><span>uno</span></div>
<div id="dos"><span>dos</span></div>

<script type="text/javascript">
<!--

function addEvent(elm, evType, fn, useCapture) {
    if (elm.addEventListener) {
        elm.addEventListener(evType, fn, useCapture);
        return true;
    }
    else if (elm.attachEvent) {
        var r = elm.attachEvent('on' + evType, fn);
        return r;
    }
    else {
        elm['on' + evType] = fn;
    }
}

function alerta(ev) {
        var src = window.event ? window.event.srcElement : ev.target;
        alert( "Has hecho click en el elemento \""+src.nodeName+"\"" );
        //devuelve span o div
}

addEvent(document.getElementById('uno'), 'click', alerta, false);
addEvent(document.getElementById('dos'), 'click', alerta, false);
// -->
</script>

</body>
</html>

Pero, si modificamos un poco la función de Scott Andrew, podemos lograr que this tenga sentido en todos los navegadores y entonces obtengamos siempre el resultado que esperamos:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" />
<meta name="Author" content="derkeNuke" />
<title>P&#225;gina nueva</title>

</head>

<body>

<div id="uno"><span>uno</span></div>
<div id="dos"><span>dos</span></div>

<script type="text/javascript">
<!--

function addEvent(elm, evType, fn, useCapture) {
    if (elm.addEventListener) {
        elm.addEventListener(evType, fn, useCapture);
    }
    else if (elm.attachEvent) {
        var f=function(){
            fn.call(elm,window.event);
        }
        elm.attachEvent('on' + evType, f);
    }
    else {
        alert('nop')
    }
}

function alerta(ev) {
    alert( "Has hecho click en el elemento \""+this.nodeName+"\"" );
    //devuelve siempre div
}

addEvent(document.getElementById('uno'), 'click', alerta, false);
addEvent(document.getElementById('dos'), 'click', alerta, false);
// -->
</script>

</body>
</html>

derkenuke · #8 (**permalink**) 05/09/2008, 08:44

Qué bueno Panino, creo que nos estamos encontrando con muchos problemas aquí.

buzu · #9 (**permalink**) 05/09/2008, 12:52

jajaja.... Por alguna razón panino es favorito de muchos. La verdad que a mi me habría dado flojera hacer tantos experimentos. Bien por esa panino.

Sin embargo, a lo que yo me refería con el this era a lo siguiente:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Untitled</title>
	<script type="text/javascript">
		function detectaElem(cual){
			alert(cual.id);
		}
	</script>
</head>
<body>
<div onclick="detectaElem(this)" id="elemento">
<p><span>Elementos</span> otra cosa mas.</p>
</div>
</body>
</html>

Sin duda mas sencillo que cualquiera de las soluciones de panino (no digo que sea mejor). Hasta ahora lo eh probado en FF Safari, IE 5.2 para mac y funciona de perlas.

David · #10 (**permalink**) 05/09/2008, 12:57

Exactamente a eso me refería yo buzu en el primer mensaje, y concuerdo contigo, creo que es la mejor solución en este caso.

Cita:

Iniciado por David el Grande

No, no es posible a menos que pases por un parámetro el objeto que llamó a la función.

Excelente aportación Panino5001, por lo que debo corregir el mensaje, sí es posible aún sin pasar por parámetro el objeto.

Saludos

.

Panino5001 · #11 (**permalink**) 05/09/2008, 13:04

Gracias, me voy a poner colorado

buzu · #12 (**permalink**) 05/09/2008, 13:04

OK, probado en IE 6, 7, y 8 (versión beta 1) y ya como extra en el 5.5 y en todos anda de perlas. No es tan sofisticada pero funciona.