A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Reaccionar a lo que sucede en el DOM

16/28
Recursos

Aportes 25

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Aqu铆 pueden encontrar una lista con todos los eventos disponibles en JavaScript y a qu茅 API pertenece 馃槃
.
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 馃槃

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 馃槃

馃専 Reaccionar a lo que sucede en el DOM

<h4>Ideas / conceptos claves</h4>

Una funci贸n an贸nima es una definici贸n de funci贸n que no est谩 vinculada a un identificador

<h4>Apuntes</h4>
  • JS es un lenguaje que est谩 basado en eventos

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

<h3>Eventos</h3> <h4>Add Event Listener</h4>
  • 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
<h4>Remove Event Listener</h4>
  • 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

A este profesor se le puede poner a x2.5馃槀

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

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.

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 鈫扨ara eliminar los eventos que hemos agregado

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

  1. Tipo: Existen varios, el mas popular es el 鈥榗lick鈥 de cuando hacemos click, al igual existe el 鈥榠nput鈥 es saber cuando ingresaron datos en el input.
  2. 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.

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

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

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

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

Genial, entonces como buena practica siempre debemos ponerle un nombre a nuestro evento o no lo podremos eliminar despu茅s. 馃槂

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

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.

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.

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



隆Que gran clase! Yo no tenia conocimiento de todas esas posibilidades de manipular el DOM, Ahora conozco la funcion contraria al 鈥渁ddEventListener鈥.

Nuestro super atajo $0 鈥 jajajaj ese va a ser mi mantra a partar de ahora 馃槅

Excelente profesor

Como dato interesante, el caso de

if(event.data === 'p') {}

Bien, si en vez de unn letra como 鈥榩鈥,escribimos una palabra ej event.data === 鈥榟ola鈥, la consola no lo detecta. No se por que sucede, pero es interesante.

馃憣

(

Geinal

<h3>Eventos</h3> <h4>Reaccionar a lo que sucede en el DOM</h4>

JS es un evento que est谩 basado en eventos.

document.addEventListener('type', listener); //Agregamos un evento
document.removeEventListener('type', listener); //Eliminamos un evento

Ejemplos sencillo y comunes:

const accion = () => {
    console.log('Has hecho click en el input');
}

const input = $0 //Ya tenemos un elemento guardado aqu铆

input.addEventListener('click', accion);

input.addEventListener('input', ()=>{
    console.log('hey'); //Cada vez que insertermos o borremos algo en el input y/o text area, se ejecutar谩 esto
});

Absolutamente todos los eventos nos env铆an un par谩metro 鈥渆vent鈥 y nos da mucha informaci贸n.

input.addEventListener('input' , event => {
    console.log(event);
});

input.addEventListener('input' , event => {
    if(event.data === 'p'){
        console.log('Escribiste una p')
    }
});
const email = $0

const accion1 = () => console.log('acci贸n1')
const accion2 = () => console.log('acci贸n2')

email.addEventListener('click', accion1);
email.addEventListener('click', accion2);
email.removeEventListener('click', accion1);

No es conveniente usar funciones an贸nimas si las vamos a borrar porque al ser an贸nimas, no podr谩n ser enviadas como par谩metros en removeEventListener

Documentaci贸n oficial de Referencia de eventos en JS

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?