EVENTOS

Método .addEventListener()

Con el método .addEventListener() permite añadir una

escucha del evento indicado (primer parámetro), y en el

caso de que ocurra, se ejecutará la función asociada

indicada (segundo parámetro). De forma opcional, se le

puede pasar un tercer parámetro OBJECT con ciertas

opciones, que veremos más adelante:

Para verlo en acción, vamos a crear a continuación, el

mismo ejemplo de apartados anteriores, de esta forma

veremos como funciona y podremos comparar con los

anteriores:

const button = document.querySelector("button");


button.addEventListener("click", function() {


alert("Hello!");


});
 EVENTOS
Observa algunas cosas de este ejemplo:

En el primer parámetro indicamos el nombre del

evento, en nuestro ejemplo, click. Con

.addEventListener() no se precede con on los

nombres de eventos y se escriben en minúsculas, sin

camelCase

En el segundo parámetro indicamos la función con el

código que queremos que se ejecute cuando ocurra el

evento.

Aunque es muy habitual escribir los eventos de esta

forma, es posible que veas mucho más organizado este

código si sacamos la función y la guardamos en una

constante previamente, para luego hacer referencia a ella

desde el .addEventListener():

const button = document.querySelector("button");


function action() {


alert("Hello!");


};


button.addEventListener("click", action);
 EVENTOS
Volviendo a la ultima actividad práctica:

En nuestra última hoja del apunte nuestra app había

quedado algo así:

Y neustro código se veía asi:

 EVENTOS
A nuestro código ahora:

tenemos que agregarle un botón

este botón será el protagonista de nuestro carrito, ya que

se encargará de ejecutar las acciones mas importantes

de nuestra app. Para ello lo que haremos será asignarle

un id.. De la siguiente manera:

Véase que estoy llamando a una de las caracteristicas de

mi objeto dentro del ID de mi botón.. Y aqui es donde

vemos lo hermoso de JavaScript. 


Esto hará que cada card tenga su propio botón con su ID

único, correspondiente a mi objeto.

 EVENTOS
Y en el inspector puedo verlo de esta manera:

Ésta será la información con la que voy a trabajar

mientras recorra e interactúe con la app.

Pero... de que manera? 


Veamoslo a continuacion!
 EVENTOS
A nuestro código ahora le vamos a decir “hey, necesito

ese id para poder trabajar!!”

y vamos a trabajar de la siguiente manera:

y te estarás preguntando, y ahora? Ahora toca crear la

funcion que sirva para agregar productos a mi carrito

(agregarProducto). Te animas?