Una de las cosas fundamentales a concer en el mundo de JavaScript es el Sistema de Eventos, es una de las cosas mas utilizadas cuando uno desarrolla interactividad en la UI basada en Js; tambien es una de las cosas peor aprendida por los novatos en JavaScript.
Lo primero que se aprende es a definir un evento de manera inline dentro del tag HTML
<div onClick=”doSomethingOnClick();”>…</div>
Esta es una forma fácil pero es la peor, razones, varias, las más importantes
1 – Estamos acomplando fuertemente nuestra lógica programática con la presentación
2 – Esta forma ejecuta el código definido como valor del atributo onClick mediante un eval, es decir
que este código se evalua al momento de ejecutarse, esto es algo pésimo.
Nunca deberíamos realizar este tipo de declaraciones de eventos.
Avanzando un poco mas, nos cruzamos con otra técnica muy común para definir eventos. Supongamos
que tenemos este fragmento dentro de un documento.
<div id=”main”>
Hello this is main
And this it’s inner
</div>
<div>
Y queremos asociar una funcion al evento click en el elemento de Id igual a main.
Vía código podemos hacer esto:
var eventElement = document.getElementById(‘main’);
eventElement.onclick = doSomeDummyEvent; //Esto es una funcion
Esto es correcto, mejor que el caso anterior pero cuenta con otro inconveninte, al realizar
el enlace de la funcion al elemento, este enlace se guarda como un atributo del elemento,
por si se sobrescribe dicho atributo el enlace previo se pierde. En otras palabras
//En algun momento se carga este fragmento de código
var eventElement = document.getElementById(‘main’);
eventElement.onclick = doSomeDummyEvent; //Esto es una funcion
//Posteriormente se carga este
var eventElement = document.getElementById(‘main’);
eventElement.onclick = doSomeOtherDummyEvent; //Esto es una funcion
Se terminará ejecutando doSomeOtherDummyEvent y nunca se ejecutará doSomeDummyEvent.
Esto por estupido que les parezca es muy grave dado que si cargamos liberías de diferentes
proveedores, o código desarrollado por dos programadores diferentes dentro del mismo proyecto,
puede provocar colisiones y llevar a errores inesperados. Moraleja, tampoco debería usarse al
menos que este conciente de lo que hace.
El tercer y último caso, este ya no tan conocido por todos, es añadir el evento a una cola de
eventos, para esto Js y DOM nos proveen del método addEventListener y removeEventListener.
Mediante este mecanismo podemos enlazar todos los manejadores de eventos que sean necesarios
para un evento determinado a un elemento particular. El orden de ejecución será determinado
por la manera en que los eventos fueron registrandose. Vemos un ejemplo de uso
var eventElement = document.getElementById(‘main’);
eventElement.addEventListener(‘click’,doSomeDummyEvent);
eventElement.addEventListener(‘click’,doSomeOtherEvent);
El problema de addEventListener es que en IE no se llama así, se llama attachEvent y deatachEvent, la
lógica sigue siendo la misma.
Relación en JQuery.
En Jquery estas dos últimas situaciones estan reflejadas, si hacemos
$(‘#main’).click(function() { …. });
Estamos en el primer caso.
$(‘#main’).bind(‘click’,function() {…});
Estamos en el segundo caso.
Moraleja, utilizar .bind, .[evento] solo si estan seguros de lo que estan buscando.
Queda mucho mas para hablar de eventos, se los contaré en próximos posts.
Les dejo unos links interesantes
Estandar
http://www.w3.org/TR/DOM-Level-2-Events/events.html
AddEventListener
https://developer.mozilla.org/en/DOM/element.addEventListener
Attach Event
http://msdn.microsoft.com/en-us/library/ms536343(v=vs.85).aspx
Jquery
http://api.jquery.com/click/
http://api.jquery.com/bind/
Una de las cosas fundamentales a conocer en el mundo de JavaScript es el Sistema de Eventos, es una de las cosas mas utilizadas cuando uno desarrolla interactividad en la UI basada en Js; tambien es una de las cosas peor aprendida por los novatos en JavaScript.
Enlace Inline
Lo primero que se aprende es a definir un evento de manera inline dentro del tag HTML
<div onClick=”doSomethingOnClick();”>…</div>
Esta es una forma fácil pero es la peor, razones, varias, las más importantes
1 – Estamos acomplando fuertemente nuestra lógica programática con la presentación
2 – Esta forma ejecuta el código definido como valor del atributo onClick mediante un eval, es decir que este código se evalúa al momento de ejecutarse, esto es algo pésimo.
Nunca deberíamos realizar este tipo de declaraciones de eventos. Avanzando un poco mas, nos cruzamos con otra técnica muy común para definir eventos. Supongamos que tenemos este fragmento dentro de un documento.
<div id=”main”>
Hello this is main
<div id=”inner”>
And this it’s inner
</div>
<div>
Enlace por atributos del elemento
Y queremos asociar una funcion al evento click en el elemento de Id igual a main. Vía código podemos hacer esto:
var eventElement = document.getElementById(‘main’);
eventElement.onclick = doSomeDummyEvent; //doSomeDummyEvent es una funcion
Esto es correcto, mejor que el caso anterior pero cuenta con otro inconveninte, al realizar el enlace de la funcion al elemento, este enlace se guarda como un atributo del elemento, por si se sobrescribe dicho atributo el enlace previo se pierde. En otras palabras
//En algun momento se carga este fragmento de código
var eventElement = document.getElementById(‘main’);
eventElement.onclick = doSomeDummyEvent;
….
//Posteriormente se carga este
var eventElement = document.getElementById(‘main’);
eventElement.onclick = doSomeOtherDummyEvent;
Se terminará ejecutando doSomeOtherDummyEvent y nunca se ejecutará doSomeDummyEvent.
Esto por estúpido que les parezca es muy grave dado que si cargamos liberías de diferentes proveedores, o código desarrollado por dos programadores diferentes dentro del mismo proyecto, puede provocar colisiones y llevar a errores inesperados. Moraleja, tampoco debería usarse al menos que este consciente de lo que hace.
Enlace por medio de la cola de eventos
El tercer y último caso, este ya no tan conocido por todos, es añadir el evento a una cola de eventos, para esto Js y DOM nos proveen del método addEventListener y removeEventListener.
Mediante este mecanismo podemos enlazar todos los manejadores de eventos que sean necesarios para un evento determinado a un elemento particular. El orden de ejecución será determinado por la manera en que los eventos fueron registrandose. Vemos un ejemplo de uso
var eventElement = document.getElementById(‘main’);
eventElement.addEventListener(‘click’,doSomeDummyEvent);
eventElement.addEventListener(‘click’,doSomeOtherEvent);
El problema de addEventListener es que en IE no se llama así, se llama attachEvent y deatachEvent, la lógica sigue siendo la misma.
Relación en JQuery.
En Jquery estas dos últimas situaciones estan reflejadas, si hacemos
$(‘#main’).click(function() { …. });
Estamos en el primer caso.
$(‘#main’).bind(‘click’,function() {…});
Estamos en el segundo caso.
Moraleja, utilizar .bind, .[evento] solo si estan seguros de lo que estan buscando.
Queda mucho mas para hablar de eventos, se los contaré en próximos posts. Les dejo unos ejemplos completos sencillos para que vean el caso 2 y 3 (No son cross browser, lo hice para chrome y firefox)[Descargar].
Tambien dejo unos links interesantes
Estándar
http://www.w3.org/TR/DOM-Level-2-Events/events.html
AddEventListener
https://developer.mozilla.org/en/DOM/element.addEventListener
Attach Event
http://msdn.microsoft.com/en-us/library/ms536343(v=vs.85).aspx
Jquery
http://api.jquery.com/click/
http://api.jquery.com/bind/
