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