驴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
}