Reaccionar a lo que sucede en el DOM

Clase 17 de 29 • Curso de Manipulación del DOM

Carlos Eduardo Gomez García

teacher•

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

Santiago Lopera Naranjo

student•

Buen aporte!, Soy bastante fan de usar el onEvent desde JavaScript me parece que se ve mas amigable a diferencia del addEventListener()

Jonathan 🦑 Alvarez

teacher•

"onEvent" generalmente no es buena idea porque solo puedes definirlo una vez.

addEventListener te deja agregar listeners de forma ilimitada.

Luis Berenguer

student•

A este profesor se le puede poner a x2.5😂

Carlos Sanjuan

student•

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.

Axel Yaguana

Team Platzi•

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.

Fernando Quinteros Gutierrez

student•

🌟 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

JS es un lenguaje que está basado en eventos

✨ Toda la magia sucede cuando escuchamos los eventos y reaccionamos con lo que sucede

Eventos

Add Event Listener

Agrega un evento

node.addEventListener(tipoDeEvento, callback)

Todos los eventos envían información del evento como un parámetro al callback
- Existen eventos específicos para elementos HTML especiales como ser video o audio

Remove Event Listener

Elimina un evento
Debemos especificar el tipo de evento y la referencia de la función al momento de invocar el método del elemento HTML
Es recomendable si deseamos eliminar eventos a futuro no crear funciones anónimas por que se perderá la referencia

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

Edgar Lopez Arroyo

student•

Gran resumen!! 👍

Jimmy Buriticá Londoño

student•

Me ha gustado mucho el curso, Jonathan explica muy bien.

Luciano Marchese

student•

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 } );

Melba Indhira Tejada Leonardo

student•

Importante: un evento tiene que tener una acción, con su nombre, para poder eliminarla.

Joel Eduardo Sánchez Herrera

student•

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:

node.addEventListener → Para escuchar eventos
node.removeEventListener →Para eliminar los eventos que hemos agregado

Los arguemntos de AddEventListener tenemos 3 argumentos que mandar que es:

Tipo: Existen varios, el mas popular es el 'click' de cuando hacemos click, al igual existe el 'input' es saber cuando ingresaron datos en el input.
Listener, que quiero hacer cada vez que haya un click o la accion

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.

Sebastian Heredia

student•

Genial, entonces como buena practica siempre debemos ponerle un nombre a nuestro evento o no lo podremos eliminar después. :)

Andrés D Amelio

student•

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,
- tipo: Este parámetro es de tipo string, y representa el tipo de evento a escuchar, toma diversos valores, según el elemento al que se le esta registrando el evento, los mas conocidos y usados son: click, change (inputs, textarea, select), input, keydown, keyup, load, etc.
- listener: El objeto que recibe una alerta cuando el evento ocurre. puede una función directa, o el llamado de una función ya declarada. Si se usa una función ya declarada es importante señalar que no se le deben de colocar los paréntesis () porque en ese punto se esta haciendo referencia a la función que se ejecutará en caso de que ocurra el evento. Si se colocan los paréntesis, en lo que se este registrando el evento esta se invocará inmediatamente y no es lo que se quiere.
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.

Felipe Zapata

student•

como hago para saltar de renglon en la consola de chrome?

Edgardo Andres Vargas Saenz

student•

Hola fzapataramirez, si estas en Windows puedes usar Shift + Enter

Efraín Hernández García

student•

Por fin! una clase que explica de manera muy detallada la parte de los eventos. Excelente clase!

Melba Indhira Tejada Leonardo

student•

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

Daniel Adolfo Ordoñez Rubio

student•

:) 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.

Melba Indhira Tejada Leonardo

student•

Gracias.

Estefania Mazo Uribe

student•

Jonathan explica excelente!!!

Edgar Lopez Arroyo

student•

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)

Andrea Lozano Cataño

student•

¿Qué significa y para qué sirve event y target?

Alondra Peña

student•

Tal vez te sirva esto: https://www.youtube.com/watch?v=GBez9_xzRL8&t=349s&ab_channel=Granosdecaf%C3%A9

Carlos Rodríguez

student•

// 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);

Daniel David Mármol Rivero

student•

// 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.

Nelson Gonzalez Escalante

student•

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.

Andres Felipe Pinchao Ramirez

student•

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*/

fermin martin

student•

Me gustan las dos orejas 👂👂 ... thanks for sharing

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

const miFuncionManejadora = () => {
    alert("Me has clickado 😄")
};

// Agrego el evento
button.addEventListener("click", miFuncionManejadora)

// Quito el evento
button.removeEventListener("click", miFuncionManejadora)

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");
});

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);

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

// 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.

/*

    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*/

Reaccionar a lo que sucede en el DOM

DOM y Web API

Y entonces nació internet...

Accede a la versión más actualizada de este contenido

¿Qué es el DOM?

Web APIs modernas

Operaciones básicas

Leer nodos

NodeLists vs Array

Crear y agregar

Otras formas de agregar

Atributos y propiedades

Eliminar nodos

Operaciones en lote

Workshop 1: Fetch

Presentación del proyecto

Descargando información y creando nodos

Enriqueciendo la información

Usando la API de internacionalización del browser

Comparte el resultado

Eventos