Eventos DOM de Javascript

Lo básico de los eventos DOM de Javascript

¿Qué es un evento DOM de Javascript?

Tipos de eventos DOM de Javascript

Utilizar el receptor de eventos DOM de Javascript

Añadir escuchadores de eventos a elementos DOM en Javascript

document.getElementById("myBtn").addEventListener("click", function(){ alert("¡Botón pulsado!"); });

Eliminar escuchadores de eventos de elementos DOM en Javascript

let myFunc = function() { alert("¡Botón pulsado!"); }; /Añadir el receptor de eventos document.getElementById("myBtn").addEventListener("click", myFunc); //Eliminar el receptor de eventos document.getElementById("myBtn").removeEventListener("click", myFunc);

Interactuar con el manejo de eventos DOM en Javascript

Principios básicos del manejo de eventos DOM en Javascript

• \textbf{Fase de captura}: Es la primera fase en la que el suceso llega hasta el elemento.
• \textbf{Fase de destino}: Aquí, el suceso llega al elemento objetivo.
• \textbf{Fase de Burbujeo}: En esta fase, el suceso burbujea desde el elemento.

Crear y ejecutar manejadores de eventos DOM en Javascript

let myEventHandler = function() { // Código que se ejecutará cuando se haga clic en el botón alert("¡Botón pulsado!"); }; // Asigna el manejador al botón document.getElementById("myBtn").onclick = myEventHandler;

Técnicas de detección de eventos en Javascript DOM

¡Hazme clic!

Interacción con el evento clic del DOM de Javascript

Funcionalidad del evento clic del DOM de Javascript

Codificación de un evento de clic en Javascript DOM

let buttonElement = document.getElementById('clickMe'); buttonElement.addEventListener('click', function() { alert("¡Me has hecho clic!"); })

let buttonElement = document.getElementById('clickMe'); let handleClick = function() { alert("¡Me has hecho clic!"); }; buttonElement.addEventListener('click', handleClick);

Probar y depurar los eventos de clic del DOM de Javascript

let handleClick = function() { console.log("

"); alert("¡Me has hecho clic!"); };

Lista Completa de Eventos DOM de Javascript

Explorar los eventos DOM HTML de Javascript

Eventos DOM Javascript más comunes

• \textbf{clic}: Se activa cuando se pulsa el botón del ratón sobre un elemento.
• \doble clic: Se activa cuando se hace doble clic con el botón del ratón sobre un elemento.
• \textbf{desplazamiento con el ratón}: Se activa al mover el ratón sobre un elemento.

• \textbf{teclaabajo}: Se activa cuando se pulsa una tecla.
• \textbf{keyup}: Se activa cuando se suelta una tecla.

• \textbf{enviar}: Se activa cuando se envía un formulario.
• \textbf{cambiar}: Se activa cuando se modifica un elemento de entrada.
• \textbf{enfoque}: Se activa cuando se enfoca un elemento de entrada.

Cómo utilizar la lista de eventos DOM de Javascript

let button = document.getElementById('miBoton'); button.onclick = function() { alert('¡Boton pulsado!'); };

Ejemplo de eventos DOM en Javascript

Ejemplos en Javascript: Implementación de Eventos DOM

Pasa el ratón por encima de mí.
 

Conceptos avanzados: Atrapamiento y Propagación en Javascript de Eventos DOM

El arte de atrapar eventos DOM en Javascript

Técnicas para atrapar eventos DOM en Javascript

element.addEventListener(eventType, function, useCapture)

//Obtener todos los elementos DOM let outerDiv = document.getElementById("outer"); let innerDiv = document.getElementById("inner"); /Añadir escuchadores de eventos outerDiv.addEventListener("click", FunctionA, false); innerDiv.addEventListener("click", FunctionB, true); function FunctionA(e) { alert("Captura del evento: Div exterior"); } function FunctionB(e) { e.stopPropagation(); //Impide que el evento se siga propagando alert("Burbujeo del evento: Div interior"); }

Comprender la propagación en los eventos DOM de Javascript

Explicación de la propagación de sucesos: Fases de captura y burbujeo en los eventos DOM de Javascript

element.addEventListener(type, listener, useCapture);

let parent = document.getElementById('parent'); let child = document.getElementById('child'); // Esto se ejecutará durante la fase de captura parent.addEventListener('clic', EventFunction, true); // Se ejecutará durante la fase de burbujeo child.addEventListener('clic', EventFunction, false); function EventFunction(e){ alert(e.currentTarget.id); }