Reaccionar a lo que sucede en el DOM
Clase 17 de 29 • Curso de Manipulación del DOM
Contenido del curso
Carlos Eduardo Gomez García
teacher•
hace 5 años
Santiago Lopera Naranjo
student•
hace 5 años
Jonathan 🦑 Alvarez
teacher•
hace 5 años
Carlos Eduardo Gomez García
Santiago Lopera Naranjo
Jonathan 🦑 Alvarez
Luis Berenguer
Carlos Sanjuan
Axel Yaguana
Fernando Quinteros Gutierrez
Edgar Lopez Arroyo
Jimmy Buriticá Londoño
Luciano Marchese
Melba Indhira Tejada Leonardo
Joel Eduardo Sánchez Herrera
Sebastian Heredia
Andrés D Amelio
Felipe Zapata
Edgardo Andres Vargas Saenz
Efraín Hernández García
Melba Indhira Tejada Leonardo
Daniel Adolfo Ordoñez Rubio
Melba Indhira Tejada Leonardo
Estefania Mazo Uribe
Edgar Lopez Arroyo
Andrea Lozano Cataño
Alondra Peña
Carlos Rodríguez
Daniel David Mármol Rivero
Nelson Gonzalez Escalante
Andres Felipe Pinchao Ramirez
fermin martin
Aquí pueden encontrar una lista con todos los eventos disponibles en JavaScript y a qué API pertenece :D
.
La función addEventListener() nos permite añadir eventos a nuestros elementos, la podemos usar de la siguiente manera:
miElemento.addEventListener("evento", manejador)
En este caso, el manejador debe ser una función callback que se ejecutará cuando el evento sea disparado. Es muy común verlo como una función anónima:
button.addEventListener("click", () => { alert("Me has clickado 😄") })
Sin embargo, la mejor práctica es crear funciones por separado, así siempre tendremos una referencia a dicha función (con una función anónima no tenemos nada que la identifique, de ahí su nombre)
const miFuncionManejadora = () => { alert("Me has clickado 😄") }; button.addEventListener("click", miFuncionManejadora) // Presta atención como la estamos mandando sin paréntesis, porque de esa forma solo le pasamos la referencia de la función, si le pusieramos paréntesis entonces la estaríamos ejecutando
Y esto tiene la ventaja de que podemos remover los eventos cuando queramos ya que tenemos la referencia de la función manejadora :D
const miFuncionManejadora = () => { alert("Me has clickado 😄") }; // Agrego el evento button.addEventListener("click", miFuncionManejadora) // Quito el evento button.removeEventListener("click", miFuncionManejadora)
También podemos definir funciones de esta otra manera 👀
button.onClick = () => { alert("Me has clickado 😄") }
Esta sintaxis es onEvento pero no es muy común ^^
.
Como dato adicional, esta es otra forma de añadir eventos desde HTML:
.
HTML
<button onclick="miFuncionManejadora">Clicame</button>
JavaScript
const miFuncionManejadora = () => { alert("Me has clickado 😄") };
De esta forma, el botón, mediante un atributo estaría llamando a la función :D
Buen aporte!, Soy bastante fan de usar el onEvent desde JavaScript me parece que se ve mas amigable a diferencia del addEventListener()
"onEvent" generalmente no es buena idea porque solo puedes definirlo una vez.
addEventListener te deja agregar listeners de forma ilimitada.
A este profesor se le puede poner a x2.5😂
Pense que era el unico que lo hacia jaja. Es tan genialmente elocuente que al aumentale la velocidad de reproduccion aun se le entiende lo que hace y lo que dice de ina forma maravillosa.
El segundo argumento de un eventListener es una función. Si se dan cuenta no se le pone el paréntesis () porque solo necesitamos hacer referencia a ella, no ejecutarla. Al momento de suceder el evento es cuando la función se ejecuta.
🌟 Reaccionar a lo que sucede en el DOM
Ideas / conceptos claves
Una función anónima es una definición de función que no está vinculada a un identificador
Apuntes
✨ Toda la magia sucede cuando escuchamos los eventos y reaccionamos con lo que sucede
Eventos
Add Event Listener
node.addEventListener(tipoDeEvento, callback)
Remove Event Listener
node.removeEventListener(tipoDeEvento, callback)
RESUMEN: Todos los elementos del DOM pueden tener las propiedades para agregar o eliminar eventos según diferentes acciones. Algunos elementos tienen acciones específicas como ser los videos o audios
Gran resumen!! 👍
Me ha gustado mucho el curso, Jonathan explica muy bien.
Aunque no remueve el listener de funciones anonimas, aca hay un truquito para ejecutar el listener una sola vez:
button.addEventListener( 'click', () => { alert( 'presionado' ); }, { once: true } );
Importante: un evento tiene que tener una acción, con su nombre, para poder eliminarla.
JS es un lenguaje que esta basado en eventos, la magia ocurre cuando los escuchamos y es aqui donde ocurre lo interesante en las apliaciones. Para escuchar eventos usamos:
Los arguemntos de AddEventListener tenemos 3 argumentos que mandar que es:
Todos los eventos que hacemos nos retornan un valor con toda la inforamcion que pueda tener ese evento. Como por ejemplo el valor event.data que es lo que el usuario haya podido escribir en un input
Si utilizamos funciones inline como no tienen nombre, nunca podriamos eliminarlas.
Genial, entonces como buena practica siempre debemos ponerle un nombre a nuestro evento o no lo podremos eliminar después. :)
Eventos
En javascript podemos trabajar con programación orienta a eventos, es decir, podemos ejecutar instrucciones de código de acuerdo a un evento en particular, ya sea que se haya pulsado un botón, presionando un check, escrito en un input, etc.
Cada evento dispone de un controlador de eventos, que no es más que un bloque de código (generalmente una función) que se ejecutará cuando se active el evento. Cuando asociamos cada bloque de código a un evento estamos registrando un controlador de evento u oyente de eventos. Este oyente esta pendiente si ocurre un evento, y el controlador es el código que se ejecuta en respuesta a dicha acción.
Existe diversas formas de manejar eventos en Javascript, pero la más conocida y recomendada son addEventListener y removeEventListener, veamos un poco mas sobre estos
addEventListener: Nos permite registrar un evento a un nodo especifico de nuestro DOM. Podemos usarla varias veces sobre un mismo elemento, para esto solo debemos invocarla tantas veces queramos y definimos los eventos que queremos escuchar. Veamos su sintaxis,
element.addEventListener(tipo, listener);
Estos parámetros tienen las siguientes funciones,
Ahora veamos un pequeño ejemplo, donde se le agregará el evento click a un botón, y ejecutará un función.
let button = document.querySelector(".btn"); // Primera forma (Función declarada) const showAlert = () => { alert("Alerta, esto es una emergencia"); }; button.addEventListener("click", showAlert); // Segunda forma (Función en linea) button.addEventListener("click", function() { alert("Alerta, esto es una emergencia"); });
removeEventListener: Este método nos permite remover un evento del elemento que lo invoca, por lo que a partir de ese momento ese evento dejará de existir para el elemento. recibe varios parámetros de igual forma que el método anterior, el primero de ellos es el tipo de evento que vamos a eliminar, el mismo que indicamos cuando lo registramos con el addEventListener, en segundo lugar debemos enviar el listener asociado al evento, y esto es debido a que podemos registrar el mismo evento varias veces y ejecutar códigos diferentes, por lo que debemos especificar cual en particular vamos a eliminar. Una cosa a tomar en cuenta debemos de tratar en lo posible de agregar eventos y ejecutar funciones ya definidas, porque debemos hacer referencia a estas al momento de remover el evento, y si las agregamos en linea no tenemos una referencia sobre esa función porque es una función anónima. Veamos un ejemplo de como usar este método.
let button = document.querySelector(".btn"); const showAlert = () => alert("Alerta, esto es una emergencia"); // Agregamos el evento button.addEventListener("click", showAlert); // Eliminamos el evento button.removeEventListener("click", showAlert);
Como vemos, al eliminar el evento hicimos referencia a la función showAlert. Si hubiésemos declarado la función directamente no tendríamos forma de hacer referencia.
como hago para saltar de renglon en la consola de chrome?
Hola fzapataramirez, si estas en Windows puedes usar Shift + Enter
Por fin! una clase que explica de manera muy detallada la parte de los eventos. Excelente clase!
const input = document.getElementById('FirstName') input <input type="text" class="form-control" id="firstName" placeholder value required>_</input> const accion = () => { console.log('Ha sucedido un click') } input.addEventListener('click', accion) console.log('Ha sucedido un click') VM7349:1 Ha sucedido un click
:) Siempre es bueno revisar nuestro código y ver que coincidan los nombres :eyes:, por ejemplo en document.getElementById('FirstName') tienes el nombre iniciando con mayúscula, pero en tu <input> tienes id firstName iniciando en minúscula :D.
Gracias.
Jonathan explica excelente!!!
Métodos para agregar y eliminar un evento a un elemento:
Agregar:
element.addEventListener('evento', función que se ejecuta cuando se detecta el evento)
deshabilitar:
element.removeEventListener('evento', función que se ejecuta cuando se detecta el evento)
¿Qué significa y para qué sirve event y target?
Tal vez te sirva esto: https://www.youtube.com/watch?v=GBez9_xzRL8&t=349s&ab_channel=Granosdecaf%C3%A9
// Seleccionar nodo const input = document.querySelector('#firstName'); // Acción al capturar evento const action = () => { console.log('Ha sucedido un click'); }; // Detectar evento click input.addEventListener('click', action); // Detectar cambio en un input input.addEventListener('input', (event) => { // event: argumento por defecto que nos da información de lso eventos console.log(`Hey!: ${event}`); }); // Imprimir el taget al hacer click input.addEventListener('click', (event) => { console.log(event.target); }); // Otra forma de imprimir el taget al hacer click input.addEventListener('click', function () { console.log(this.target); // El this dentro de este scope captura las informaciones de event // sin embargo el this no es compatible con arrow functions // por eso en arrow function se usa el argumento (event) }); // Seleccionar nodo const email = document.querySelector('#email'); const action1 = () => console.log('Acción 1'); const action2 = () => console.log('Acción 2'); // Detectar evento click email.addEventListener('click', action1); email.addEventListener('click', action2); // Eliminar evento, debemos siempre colcoar la acción en una función aparte para que en un futuro podamos eliminarla email.removeEventListener('click' ,action1);
// Agregar eventos a los nodos. const input = document.getElementById('firstName'); const accion = () => { console.log('ha sucedido un click'); }; input.addEventListener('click', accion) // Primer argumento es la accion que escucho y el segundo que quiero hacer al escucharlo, es decir, una funcion directamente, con sintaxis flecha o definir una variable con funcion. // Otro evento que funciona es input input.addEventListener('input', () => { console.log('heey!'); }); //Cada vez que escriba en un input // se me daran los dos // Puedo analizar las propiedades del evento. input.addEventListener('input', (event) => { if (event.data === 'p') { console.log('escribiste una p'); } }); // Los eventos que nosotros agreguemos a un nodo tienen tanto semtido como el nodo al que estamos eacuchando. // Eliminar event const email = document.getElementById('email'); const accion1 = () => console.log('accion 1'); const accion2 = () => console.log('accion 2'); email.addEventListener ('click', accion1) email.addEventListener ('click', accion2) email.removeEventListener('click', accion1) // Esto es una de las razones por las que usar funciones inline o funciones anonimas no permiten ser eliminadas como eventos porque no tienen nombre.
Los eventos se envían para notificar al código de cosas interesantes que han ocurrido. Cada evento está representado por un objeto que se basa en la interfaz Event, y puede tener campos o funciones personalizadas adicionales para obtener más información acerca de lo sucedido. Los eventos pueden representar cualquier cosa desde las interacciones básicas del usuario para notificaciones automatizadas de las cosas que suceden en el modelo de representación.
Apuntes Sobre Los Eventos 👂👂
/* Eventos -> node.addEventListener -> node.removeEventListener */ //seleccionamos el elemento con el cual vamos a utilizar los eventos const input = document.querySelector('firstName'); /* agregamos al input ek escuchador de eventos .addEventListener() este metodo recibe como 1 parametro que tipo de evento vamos a escuchar En el segundo parametro de esta funcion tengo que especificar un listener es decir que quiero hacer cuando haya un click agregamos una function puede ser una arrow fuction funcion anonima agregar una funcion ahi mismo */ const accion = () =>{ console.log('ha sucedio un click') } input.addEventListener('click', accion) // tipo de evento input si escribo en el input dispara el evento input.addEventListener('input', () =>{ console.log('hey') }) /* Todos los eventos en nuestra funcion nos va a enviar un parametro que se llama evento a este parametro no importa el nombre que le asignemos Pero este evento nos trae mucha informacion a la que podremos acceder en conjunto con el punto */ input.addEventListener('input', (event) =>{ console.log(event) /* Data recibe lo que se digita en el input entonces cuando digitemos p se ejecutara el evento y imprimira algo en consola*/ if(event.data === 'p'){ console.log('Escribiste una "p"'); } }) /* Ahora veremos como eliminar los eventos que hemos agregado para que no se acumulen y los podamos controlar atraves de removeAddListener */ const email = document.querySelector('email'); // Creamos la funcion que utilizaremos en nuestro escuchador de eventos const accionUno = () => console.log('accion 1'); const accionDos = () => console.log('accion 2') /* Podremos agregar mas de dos eventos a un solo elemento y se ejecutaran en orden */ email.addEventListener('click', accionUno); email.addEventListener('click', accionDos); /* Para eliminar una accion utilizamos la funcion .removeEventListener() que recibe por parametro el evento y la accion que vamos a eliminar que en este caso es la funcion anonima. */ email.removeEventListener('click', accionUno); /* Por eso es recomendable no utilizar funciones anonimas ya que si las quisieramos eliminar no se podria eliminar */ email.addEventListener('click', () => {console.log('algo')}) email.removeEventListener() /* si utilizaramos esta funcion no podriamos eliminar porque seria una funcion sin nombre entonces no tendriamos un argumento que pasar como 2 parametro*/
Me gustan las dos orejas 👂👂 ... thanks for sharing