Skip to main content Link Menu Expand (external link) Document Search Copy Copied

Eventos y XMLHttpRequest

Contenidos
  1. Listeners
  2. Propagación
  3. Captura
  4. Burbujeo
  5. Prevent default
  6. Tipos de eventos.
  7. Enviar solicitudes, procesar la respuesta.

En estos laboratorios usaremos lo aprendido en el laboratorio de pruebas unitarias para crear un mock o doble de pruebas para alert. De esta forma podremos corroborar que nuestro código sí genera la salida esperada. Es decir podremos preguntar al mock si se ejecutó internamente console.log, cuantas veces y con qué parámetros.

Listeners

Podemos ‘enganchar’ funciones conocidas como event handlers o event listeners para responder a eventos específicos y el navegador invocará estas funciones tan pronto como ocurran.

La forma más simple y directa es agregar un listener como atributo al mismo nodo HTML. Se declara entre comillas código JavaScript, indicando que hacer cuando se produzca el evento sobre ese nodo. Veamos un ejemplo:

<button type="button" name="button" class="btn btn-blue" onclick="alert('Don\'t touch this!')">Inline Listener</button>

En este caso cuando un usuario haga click en el button, se gatilla el evento click u onclick y el string asociado al valor del atributo onclickse ejecutará en el intérprete. Esta alternativa es simple, pero poco mantenible ya que agrega más responsabilidades al HTML, que debería estar encargado solamente de representar la estructura del documento y no su comportamiento.

Una solución es usar la propiedad onclick del elemento del DOM como en el siguiente código:

someNodeElement.onclick = () => { ...someCoolFunctionality... }

Lo malo de esta solución es que solo podemos enganchar solo una función que podría llegar a ser muy compleja, por eso es mejor asociar viarios handlers en lugar de uno más complejo.

La alternativa a esto es usar el método addEventListener que nos permite asociar una función a un evento y su método de propagación.

someNodeElement.addEventListener('click', someCoolCallback, useCapture)

El parámetro useCapture es un booleano que especifíca cómo se propagará el evento por el DOM. Por defecto es Burbujeo, pero podemos especificar que use Captura.

Propagación

Los eventos ocurren en en nodos que son parte de una estructura jerárquica. Por lo que al ocurrir un evento en un nodo específico, indirectamente también está ocurriendo un evento en su nodo padre. Por lo tanto el orden de ejecución de los listeners depende de cómo de considere la dirección del flujo del evento desde o hasta su nodo target. Este avance del evento se le conoce como propagación y pude ser en dos direcciones conocidas como Captura (Capture) y Burbujeo (bubbling).

Captura

La propagación por captura comienza desde el nodo raíz del árbol DOM hasta el nodo target. Podemos pensarlo como que el evento baja desde el <html> hasta el nodo que originó el evento. Para utilizar esta forma se debe indicar true en el tercer parámetro.

Burbujeo

Esta es la alternativa por defecto y el evento se propagará desde el nodo target hasta el nodo raíz. Si queremos evitar que un evento burbujee podemos detenerlo con el método stopPropagation()

Prevent default

Algunas de las etiquetas HTML tienen comportamientos predefinidos (por defecto) para interactuar en aplicaciones en red. Por ejemplo la etiqueta <a href="www.boolean.cl">Ir</a> genera una solicitud y refrescará el contenido de la página con el nuevo documento. Algo similar ocurre con los botones y formularios. En ocasiones debemos tomar control de estos elementos con un comportamiento que particularmente definiremos sin ejecutar su comportamiento predeterminado. Esto lo logramos con el método preventDefault().

Tipos de eventos.

En el contexto del navegador existen muchos otros eventos: “focus-in”, “hover”, “blur”, eventos de teclado, eventos del navegador mismo, etc. Pero todos ellos obedecen a lo descrito para el evento click y puedes imaginar que diferentes navegadores implementan eventos diferentes aunque la mayoría con considerados cross-browser.

Enviar solicitudes, procesar la respuesta.

A partir de IE7 existe disponible la función constructora XMLHttpRequest que permite hacer solicitudes al servidor para solicitar información sin tener que recargar completamente la página y así modificar el documento actual con información adicional frente a los ojos del usuario [4].

Cada instancias representa una solicitud que va cambiando de estado y ejecutando el callback asociado al método onReadyStateChange. En los laboratorios tenemos dos ejemplos un para solicitar información con el método GET y otro por POST.

Inicialmente a la técnica de solicitar información asíncronamente con este objeto se llamó AJAX por su sigla referente a Javascript asíncrono y XML por el formato para el intercambio de información. Hoy es mucho más común utilizar JSON para intercambiar información entre el servidor y los navegadores. Para Javascript a partir de ES5 hay soporte nativo para transformar datos en formato JSON a objetos Javascript y viceversa con los métodos JSON.stringify() y JSON.parse(). Fuente: MDN