Cuando se asignan los eventos de esta manera:
Código PHP:
a.onclick=...
El intérprete espera una referencia a la función a ejecutar cuando se produzca el evento. Esa referencia puede ser el nombre de una función sin paréntesis o puede ser una función anónima.
Nombre de función sin paréntesis:
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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript">
function agregar_carrito() {
alert(this.id);
/*en este caso lo tenemos fácil porque el valor que queremos
referenciar dentro del handler es una propiedad del objeto 'a' y entonces podemos usar this;
en otros casos en que necesitemos variables que no pertenezcan al
objeto deberemos buscarnos la vida con namespaces o registrys o usar variables globales
*/
}
onload=function(){
var a = document.createElement('a');
a.innerHTML = 'Agregar al carrito de compras !';
a.id='ppp';
a.onclick = agregar_carrito;
document.body.appendChild(a);
}
</script>
</head>
<body>
</body>
</html>
Función anónima:
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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript">
function agregar_carrito(pos_cd) {
alert(pos_cd);
}
onload=function(){
var a = document.createElement('a');
a.innerHTML = 'Agregar al carrito de compras !';
a.id='ppp';
a.onclick = function(){agregar_carrito(a.id);}
document.body.appendChild(a);
}
</script>
</head>
<body>
</body>
</html>
También podemos usar funciones con paréntesis y argumentos, pero puede resultar un poco menos comprensible:
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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript">
function agregar_carrito(pos_cd) {
//notar que en realidad retornamos una función anónima:
return function(){
alert(pos_cd);
}
}
onload=function(){
var a = document.createElement('a');
a.innerHTML = 'Agregar al carrito de compras !';
a.id='ppp';
a.onclick = agregar_carrito(a.id);
document.body.appendChild(a);
}
</script>
</head>
<body>
</body>
</html>