JavaScript y el DOM: Eventos
Programación Orientada a Eventos
- Paradigma de programación
- La ejecución del programa va a estar determinada por los diferentes sucesos o eventos que ocurran, sean o no definidos por el usuario
Programación Orientada a Eventos
- La interacción con los sitios web y usuarios se basa fundamentalmente en eventos
- Cuando programamos en JS, gran parte del tiempo lo hacemos orientado a eventos (DOM, callbacks, Node)
Programación Orientada a Eventos
- En en paradigma estructurado/imperativo, nosotros definimos el flujo del programa; en la programación dirigida por eventos será el usuario (ó algún evento definido en el sistema) quien dirija el flujo
- Al comenzar la ejecución del programa, el programa no hará nada hasta que se produzca algún evento
Programación Orientada a Eventos
- Es la base de las Interfaces de Usuario (UIs)
Programación Orientada a Eventos
- Los sistemas de notificaciones también usan este paradigma
Necesitamos saber qué tipo de evento nos interesa, sobre quién y qué vamos a hacer cuando suceda
¿Cómo hacemos para reaccionar a los eventos?
Event Listeners
- Necesitamos una forma de registrar los eventos que suceden, para reaccionar a ellos
- Los eventos se registran en el contexto de un objeto
- Agregamos event listeners a los elementos sobre los cuales queremos escuchar algún evento
target.addEventListener(type, listener[, options]);
.addEventListener
- El 1er parámetro es el tipo de evento que queremos registrar
- El 2do parámetro es un callback (event handler) que se va a ejecutar cuando se produzca el evento
- Puede tener parámetros opcionales
.removeEventListener
- Sirve para remover un listener registrado previamente sobre algún nodo
⚡️
const subtitles = document.querySelectorAll('h2');
subtitles.forEach(h2 => h2.addEventListener('click', e => {
console.log(e);
console.log(e.target);
}));⚡️
const authors = document.querySelectorAll('#fantasy .author');
const complaints = ['Ouch!', 'HEY!', 'Mamá cortaste toda la loz!',
'SACÁ LA MANO DE AHI CARAJO!'];
const getRandomFrom = arr => arr[Math.floor(Math.random() * arr.length)];
authors.forEach(author => author.addEventListener('click', () => {
console.log(getRandomFrom(complaints))
}));Propagación de eventos
- Los nodos también captan los eventos que suceden en sus descendientes y ejecutan los handlers
- El handler más específico se ejecuta primero
- Los eventos se propagan desde el nodo origen hacia la raíz del documento
Usar propagación de eventos para el ejercicio de eliminar nodos
Prevenir comportamientos por default
- Muchos eventos tienen un comportamiento default asociado (ej: clickear un link, click derecho, navegar usando las teclas de dirección, etc)
- Si queremos evitar que estos comportamientos sucedan, podemos usar el método .preventDefault()
Prevenir comportamientos por default
- A menos que tengamos un buen motivo para hacerlo, en lo posible evitamos usar este feature, porque estamos modificando el comportamiento esperado y puede no ser una buena UX
Javascript y el DOM: Eventos
By Nicolás Quiroz
