Reaccionar a lo que sucede en el DOM

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 😄

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

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

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

• JS es un lenguaje que está basado en eventos

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

• 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

• 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

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:

• 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:

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

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,

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

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

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?

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

• EventTarget: addEventListener() method
• EventTarget: removeEventListener() method

En los comentarios esta el link a los eventos que tiene Javascript

Mis apuntes en Notion💚

Mas curso de este profesor porfavor.

No conocía el removeEventListener. Voy a tener en cuenta el consejo de no usar funciones anónimas en el addEventListener. No había considerado la necesidad del nombre, pero ahora tiene sentido.

¡Que gran clase! Yo no tenia conocimiento de todas esas posibilidades de manipular el DOM, Ahora conozco la funcion contraria al “addEventListener”.

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 ‘p’,escribimos una palabra ej event.data === ‘hola’, la consola no lo detecta. No se por que sucede, pero es interesante.

👌

(

Fuente: Eventos JavaScript

Geinal

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 “event” 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