Manejar eventos DOM

De modo muy similar a como hemos vigilado el evento document.ready, podemos añadir otros vigilantes de eventos a distintos elementos del DOM. Veamos algunos ejemplos de como jQuery nos permite hacerlo.

Los gestores de eventos DOM pueden ser añadidos a un elemento específico, a un conjunto de elementos existentes, o a un elemento que aún tiene que ser creado.

Veamos un ejemplo de como añadir un vigilante  click() jQuery a un elemento del DOM:

  • Añadir un gestor de click a un elemento específico:
$('#primer-boton').click (e) ->
  e.preventDefault()
  alert 'Has pulsado primer-boton'
  • Añadir un gestor de click a un conjunto de elementos similares:
$('ul#color-list a').click (e) ->
  e.preventDefault()
  color = $(e.target).data('color')
  alert "Thank you for selecting #{color}."
  • Añadir un gestor click a un elemento que todavía no existe
$(document).on 'click', 'button.new-button', (e) ->
  e.preventDefault()
  buttonValue = $(e.target).data 'counter'
  alert "You clicked button ##{buttonValue}"

En los códigos que hemos escrito se muestran tres modos comunes de usar jQuery para añadir vigilantes de eventos a elementos del DOM.

En el primer ejemplo, simplemente vinculamos un gestor a una instancia específica de un elemento del DOM identificado usando un selector #id. En concreto, asignamos un gestor de evento al evento de click del elemento primer-boton.

Nuestro gestor de eventos recibe un objeto event(e, en nuestro ejemplo) que provee información adicional que nuestro gestor puede necesitar. También provee un método para evitar el comportamiento predeterminado. Por ejemplo, podemos capturar el click del botón de envío de un formulario para llevar a cabo la validación de los datos provistos y, si hay un error de validación, impedir la acción predeterminada del formulario que sería enviado, para ello ejecutamos e.preventDefault( ). Esto es muy útil cuando asignamos un gestor click a elementos ancla y botones.

Nuestro segundo ejemplo aplica un gestor de evento a todos los elementos DOM que coinciden con el selector consultado,   ul#color-list a, en este caso. cualquier elemento ancla encontrado dentro de la lista desordenada con el ID de color-list vigilará por un evento click y ejecutará nuestro gestor de evento. Este gestor usa la propiedad e.target y el método data( ) de jQuery para recuperar el valor de data-color y mostrar una alerta al usuario informando del color que ha sido pulsado.

Nuestro tercer ejemplo usa una característica de jQuery que permite registrar un gestor de evento a elementos DOM que aún no existen. Esto es muy útil en Single Page Applications(SPA), donde cargamos elementos DOM en nuestra aplicación en tiempo de ejecución. El método on() de jQuery utiliza este comportamiento del navegador para los eventos enlazados a elementos todavía no existentes (llamados bubbling events en inglés). Aquí usamos on() para vincular un vigilante de evento a un elemento contenedor(document, en nuestro ejemplo). A continuación le decimos al vigilante en que tipo de evento estamos interesados y el alcance en el que estamos interesados (click y button.new-button, respectivamente).

Pulsando en el botón add-button añadirá un nuevo botón con la clase CSS de .new-button al DOM. usando on(), configuramso un gestor de evento que vigilará los eventos click en todos los botones contenidos en el documento con la clase .new-button. Cuando el evento es detectado, capturamos el valor del contador del objetivo(data-counter) y mostramos un mensaje al usuario.

Usar este patrón nos permite crear vigilantes para elementos que nuestra aplicación creará dinámicamente. Esto nos provee con una gran flexibilidad cuando usamos jQuery para nuestras aplicaciones.

Podemos ver nuestros códigos de ejemplo en una página totalmente funcional:

See the Pen Eventos del DOM by 0utKast (@0utKast) on CodePen.


Ver tutorial anterior (Uso de CoffeeScript con jQuery)

 

CoffeeScript y jQuery. Manejar eventos DOM

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>