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

2 comentarios:

  1. Hola, muy bueno tu blog, espero q siga adelante veo q es nuevito...
    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??

    ResponderEliminar