Escuchando eventos

Los eventos giran alrededor de una función llamada addEventListener(), la cual recibe 3 argumentos: type (por ej. click), listener (funcion callback), y useCapture (este argumento ya lo veremos en otro post).

Usando los dos primeros argumentos podemos asociar una función a un elemento del DOM, la cual se invocara cuando un evento particular (un click, por ejemplo) es lanzado por el elemento.

var boton = document.getElementById('btnCrear');

boton.addEventListener('click', function(){ ... }, false);

Podemos borrar el listener utilizando removeEventListener(), pasando los mismos argumentos que addEventListener(). Pero claro, si la function pasada es anonima se pierde la referencia, a no ser que destruyamos el elemento.

var div = document.getElementById('div');

var listener = function(evento) { ... };

div.addEventListener('click', listener, false);

div.removeEventListener('click', listener, false);

La función listener recibe el argumento evento, que es el objeto evento. Se puede utilizar para obtener información sobre el evento, como un timestamp, coordenadas, y el target. Tambien tiene varias funciones para parar la propagación del evento y prevenir la acción por defecto.

Los nombres del tipo de evento varian de un navegador a otro, pero todos los navegadores modernos tienen los siguientes:

  • click
  • dblclick
  • mousemove
  • mouseover
  • mouseout
  • focus
  • blur
  • change (para inputs)
  • submit (para formularios)

En la web de quirksmode.org puedes consultar una tabla de compatibilidad de eventos.

Escuchando eventos

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s