Código :
<body onload="start()"></body>
o con puro javascript asi:
Código :
window.onload = start;
Es muy simple una vez que carga la pagina, llama la funcion start, esto puede ser util para empezar a cargar jsons, o empezar a correr, otros casos son la funcion resize, mouseup, mousedown, touchStart, touchEnd dependiendo de lo que desemos realizar. Un problema con este enfoque es que solo podemos agregar una funcion a la vez, y en muchos casos no queremos limitarnos, por que podemos tener varias instancias que usen un evento y cada uno necesita poder manejarse independientemente, de otra manera tendremos codigo spagetti en el cual si queremos agregar o quitar algo tenemos que coordinar varios archivos.
Para lograr esto usamos eventlisteners, un evento es algo que ocurre puede ser un mousedown, un click, mover el mouse, un archivo que se termino de subir y podemos definir nuestros eventos como el usuario hizo login, un objeto se agrego al carrito de compras... Y un eventListener es una funcion que escucha esos eventos, es decir cuando se haga click en el documento una funcion puede ser llamada.
Debo decir que hay un problema de compatibilidad con los navegadores y por eso tenemos que agregar el siguiente codigo:
Código :
function addEventSimple(obj,evt,fn) {
if (obj.addEventListener)
obj.addEventListener(evt,fn,false);
else if (obj.attachEvent)
obj.attachEvent('on'+evt,fn);
}
function removeEventSimple(obj,evt,fn) {
if (obj.removeEventListener)
obj.removeEventListener(evt,fn,false);
else if (obj.detachEvent)
obj.detachEvent('on'+evt,fn);
} Una vez que tenemos este codigo podemos hacer lo siguiente:
Código :
addEventSimple(window, 'load', start);
La ventaja es que podemos usarlo varias veces, en varias instancias para los mas avanzados podemos usar classes, en conjunto con closures para retornar a la instancia y hacer lo siguiente:
Código :
var self = this;
this.mouseMoveEffectFN = function(){var event = arguments[0]; self.onmousemove(event);};
addEventSimple(document, 'mousemove', this.mouseMoveEffectFN);
Con esto logramos que cada vez que se haga un mousedown, se llame la funcion onmousemove de la clase. Esto es ideal para keydowns cuando creamos componentes que queremos escuchen el teclado, o componentes que se cierren solos cuando se hace click afuera del componente, trataremos este tema mas adelante cuando continue los posts de como escribir classes en JS.
