¿Qué son los eventos del Eventos del DOM?
Los eventos del DOM suceden en paralelo con el JavaScript en tiempo de ejecución. Cuando un evento ocurre, el manejador de eventos genera su camino hacia la pila de llamadas para ser ejecutado.
Si multiples eventos son detectados, multiples tareas serán puestas en la lista de eventos en el orden en el cual estas ocurrieron. Cuando la pila esta vacía, la primera tarea que sea empujada dentro de la fila de tareas es empujada a la pila de eventos. Cuando la tarea finaliza, el ciclo continua y la siguiente tarea en la fila de eventos es empujada a la pila de solicitudes. Así, si un cierto numero de tareas toman un largo tiempo en finalizar, las tareas detrás en la fila de eventos tendrán que esperar.
¿Cuáles son los tipos de eventos del DOM?
- Click : Ocurre cuando un usuario da click en un elemento del DOM.
- Mouseenter - Ocurre cuando un puntero es movido sobre un elemento.
- Mouseleave - Ocurre cuando un puntero es movido fuera de un elemento.
- Keypress Event - Ocurren cuando una tecla es presionada.
¿Cómo referenciar eventos del DOM?
Los elementos del DOM pueden referenciarse utilizando el método document.getElementById(id), en donde id es el atributo id del elemento.
<button id="mi-botton">Mi Botón</button>
const button = document.getElementById("mi-botton");
¿Cómo crear un listener con la función addEventListener de JavaScript?
El llamada al método addEventListener(eventType,eventHandler) es utilizada para agregar listeners (vigías) a objetos del DOM. El argumento eventType es un string que representa el tipo de evento que se esta escuchando. El eventHandler es la función callback que maneja el evento una vez que este es detectado.
<button id="mi-botton">Mi Botón</button>
document.getElementById("mi-botton").addEventListener("eventType", () => {
// ... codigo del evento
});
¿Cuáles son los atributos de los eventos del DOM?
Los elementos del DOM tienen ciertos atributos de evento que pueden ser utilizados para manejar dichos eventos.
- onclick : click sobre el elemento
- onmouseover : cursor encima del elemento
- onmouseleave : cursor abandona el elemento
- onkeypress : tecla presionada
El formato general para el nombre de los atributos es on + eventType. Las funciones manejadoras de eventos pueden ser asignadas de los atributos del evento a los manejadores de eventos.
<button id="mi-botton">Mi Botón</button>
document.getElementById("mi-botton").oneventname = function () {
// ... hacer algo
};
El atributo de evento también puede ser asignado en el código del HTML.
<button id="mi-botton" oneventname="eventHandler()">Mi Botón</button>
function eventHandler() {
// ... hacer algo
}