viernes, 24 de octubre de 2008

Controlando eventos

Por el post anterior recibi una pregunta muy interesante:

Con el tema de eventos, estaba viendo q en GMAIL, cuando aparece una direccion de correo, aparece el clasico "mailto:" con parte del href del anchor.
Pero en lugar de levantar el clasico outlook o tu gestor de mail pop3, levanta en ventana aparte una pagina donde nos permite redactar el mail.
Como se puede lograr esto??


es muy simple las funciones que son asignadas en los eventos pueden devolver un valor true o false (a decir verdad todas las funciones en javascript pueden devolver un valor por más que no sea utilizado cuando se llamó a la funcion). El punto es que si una funcion asignada a un evento devuelve False, esto evita que el comportamiento normal para ese evento continue (que no es lo mismo que cancelar la burbuja de eventos para los entendidos).
gracias a esto podemos decir entonces:



<html>
<head>
</head>
<body>
<a id="linkid" href="mailto:hola@gmail.com">link</a>
<script>
var link = document.getElementById("linkid");
link.onclick=function(){
alert("aqui puedo hacer lo que quiera");
return false;
}
</script>
</body>
</html>

probado en firefox 3 y IE 6 (si funciona en IE 6 , lo podemos hacer funcionar en cualquier cosa)
Esto esta bueno porque podemos permitir cierto comportamiento comun del navegador, como click derecho->copiar ruta del enlace, y se copia el enlace bien, pero al momento del click podemos cambiar el link al que se dirije y listo.

lo que es cierto es que tambien podemos probar en los eventos onmousedown y onmouseup pero eso se los dejo a ustedes asi se divierten

Saludos y sigan mandando preguntas

jueves, 23 de octubre de 2008

Javascript Events en el DOM

Los eventos javascript son más complicados de lo que uno cree
hay tres modelos importantes que entender
el modelo Tradicional

function hacerAlgo(){
alert('lo hice');
}

obj.onclick= hacerAlgo;

donde los eventos son miembros seteables de un objeto.
Como la mayoria de ustedes sabrá obviamente podemos utilizar funciones anonimas (lambda) para asignar los eventos

obj.onclick= function(){
alert('hizo click')
}

todos los navegadores soportan este modelo de eventos, el unico problema es que no es facil poder contar con el objeto event ni con el objeto que recivió el evento de una manera cross browser debido a la (mala) implementación de IE (trident) veamos un ejemplo

supongamos un elemento div con id="el_div"

var obj = document.getElementById("el_div");
obj.onclick = function (e){
// en la mayoria de los browsers compatibles con
//w3c el parametro e de la funcion posee el objeto event
// en IE el objeto esta en window.event
e = e || window.event;

}

de esta forma tenemos el objeto event en la variable e
gracias a la utilizacion del operador default (||)
el uso del operador default tambien conocido como operador logico OR es muy simple
si el primer operando devuelve un valor truthy (verdaderoso o distinto de null o 0) entonces devuelve el primer operando, de lo contrario devuelve el segundo operando. simple y maravilloso

bueno por ahora les dejo los modelos avanzados en un link pero despues vuelvo con mas comentarios
modelos avanzados segun ppk