El método document.addEventListener();
Este es el método estrella a la hora de trabajar con eventos. Este método precisa dos argumentos, primero es el evento que va a escuchar y el segundo es la función a ejecutar si se presenta tal evento. El método pasará el evento como argumento a la función, no obstante esta última no necesita los paréntesis.
Cuando se declara la función, es una normativa representar el parámetro, que será el evento, por la letra «e», aunque también suele usarse «evt».
const formulario = document.querySelector(‘#formulario’);
formulario.addEventListener(‘submit’, validarFormulario);
function validarFormulario(e) {
e.preventDefault;
console.log("Buscando...");
}El evento
El evento como tal es una serie de valores que quedan registrados en el explorador. Es fundamental conocer estos valores para trabajar con ellos. Si ejecutamos el siguiente código…:
const busqueda = document.querySelector('busqueda');
busqueda.addEventListener('input', (evt) => {
console.log(evt);
})…obtendremos una serie de información en la consola que aplicada se usa para muchas cosas, tales como agregar clases, quitar clases, etc.
En especial el parámetro «target» trae información que puede ser editada y este es muy usado en los proyectos del curso. El target en si siempre arroja la línea de código html respectiva al elemento html que captura el evento. En el ejemplo de arriba se puede ver la etiqueta <input> completa y abajo como aparece la misma en el html.
Abajo podemos ver parte de los valores incluidos para el parámetro «target» cuando se le despliega.
Registrar eventos con función anónima y función declarada
El ejemplo anterior utilizó una función anónima:
const busqueda = document.querySelector('busqueda');
busqueda.addEventListener('input', (evt) => {
console.log(evt);
})Pero es muy usual también usar funciones declaradas para separar las cosas.
const formulario = document.querySelector('#formulario');
formulario.addEventListener('submit', validarFormulario);
function validarFormulario(e) {
e.preventDefault();
console.log(e.target.action);
}Recordar que el método addEventListener va a pasar el evento como argumento de la función pero no es necesario el paréntesis en el nombre de la función y que luego, cuando se declara la función, esta por normativa se describe su parámetro como e, evt o event que será el evento como tal.
El evento DOMContentLoaded
Este es un evento que se dispara cuando se ha terminado de cargar el documento HTML.
document.addEventListener('DOMContentLoaded', () => {
console.log('Documento listo');
} )El instructor indica que con DOMContentLoaded (aunque no estoy seguro si se refería para cualquier listener) siempre se usa una función anónimo, pero en los proyectos que ya he visto (porque estas notas las estoy haciendo luego de haber visto ya algunos proyectos y he regresado a la documentación de los eventos en mi blog) veo que usa el nombre de una función que luego declara.
Función anónima
Una función anónima es una función que no tiene nombre. Es decir, el código no dice: «ejecuta esta función». En cambio el código dice: «ejecuta esto, no importa el nombre, solo toma el argumento». Creo que esto se hace cuando la función tiene un trabajo muy particular y puntual. Por lo general, estas funciones son, dado por su comodidad, funciones flecha.
Eventos de mouse
Solo decir que todos los eventos están catalogados, si necesitare alguno en el futuro solo buscaré como es su nombre y ya. No es necesario que me ponga a describirlos aquí como lo hace el instructor.
Eventos del teclado
Veo que el más importante es el input, pero no mucho qué decir, eventos son eventos.
Evento de formularios – Evento Submit
Solo es uno pero es muy importante y merece su propio apartado. Se trata cuando se presiona el «input» o el «button» que tiene el atributo «type» como «submit» dentro de un elemento <form>.
Pero este es un evento del elemento <form>, es decir, si quiero capturar este evento con un listener debo hacerlo teniendo seleccionado el elemento <form> y no algún botón u otra cosa asociada al formulario.
const formulario = document.querySelector('#formulario');
formulario.addEventListener('submit', nombreFuncion);Dentro de los parámetros de este evento vamos a tener submitter, este identifica el elemento html que fue responsable del evento submit del formulario.
Método .preventDefault para elementos tipo submit
No le paré mucho a este método al principio, pero el coño es mejor tenerlo claro para evitar dolores de cabeza. Es algo común hacerlo.
El profesor indica que hay acciones por defecto en botones, formularios y enlaces. Esas acciones por default a veces o la mayoría de las veces (no lo tengo tan claro) es mejor evitarlas porque las acciones se las estamos determinando nosotros mismos por medio de código. Estas acciones podrían ser enviar unos datos del formulario o ir a un enlace y están, al parecer, declaradas en el html.
Cuando se trabaja con JavaScript parece que va a ser común parar estas acciones por default de esta manera mas no editando el html y luego esas acciones serán suplantadas por medio de otros métodos como AJAX o Fetch API entre otros muchos.
En el curso el instructor indica cómo un botón tipo «submit» de un formulario de búsqueda hace una acción no deseada cuando se presiona, específicamente indica que el formulario tiene una dirección (/buscador) a donde va a enviar los datos del formulario con el método «POST».
Se entiende bastante bien el hecho de que como estamos haciendo simulaciones, esta acción no es deseada porque es un ejercicio para aprender código, que al final no va realmente a enviar ningún dato a ninguna parte.
Pero en un proyecto más adelante pasó algo diferente, pero igualmente en botones tipo «submit». En el proyecto de simulación de envío de email, el cual tampoco envía datos a ninguna parte, se le colocó al botón «enviar» el defaultPrevented, pero al botón «reset» no.
Cuando termino el código de ese ejercicio resulta que cuando presionaba el botón «reset» era como si presionara el botón «enviar», es decir, simulaba el envío de los datos que es como funcionaba el botón enviar. Eso se corrigió cuando coloque el defaultPrevented en true también para el botón reset.
Pero a diferencia del ejemplo anterior este formulario no tenía atributos como action o method en su html. Pero encontré algo en los parámetros del e.target, el baseURI era igual para ambos.
Para el momento no tengo una idea de dónde se edita tal parámetro, imagino que quizás con JavaScript lo pueda dejar en valor «null». Además no tengo del todo claro que sea la causa del problema o más bien un efecto.
Algunos parámetros que nos dan una idea sobre lo que va a hacer por default un elemento son:
- e.target.methos
- e.target.action
- e.target.baseURI (deterfminado por mi en un caso particular)
Los eventos tienen entre sus parámetros uno llamado «defaultPrevented» que indica si tiene activado o no tal funcionalidad, cuando al evento se le coloca el eventDefault ese valor pasa a ser true.
Evento con Scroll
Resulta que estos eventos de scroll suceden en la ventana global, window. ¿Por qué? No sé.
Método .getBoundingClientRect()
De los eventos con scroll lo más destacable es el método getBoundingClientRect, que se usa para medir en pixeles la proximidad a la pantalla de un elemento.
window.addEventListener('scroll', () => {
const premium = document.querySelector('.premium');
const ubicacion = premium.getBoundingClientRect();
if (ubicacion.top < 784) {
console.log('El elemento ya está visible');
} else {
console.log(Aún no está visible);
}
})Haciendo console.log a «ubicación» podemos ver
Tenemos bottom que es la distancia a bajar para dar con el elemento, una vez que elemento pasa para arriba de la pantalla este valor es negativo. Height es el tamaño del elemento, left su separación con el lado izquierdo del documento, right, lo anterior pero con el derecho, sus coordenadas, entre otros.
Efecto Event Bubbling
El instructor pinta esto como un efecto tipo error, pero no lo es, es un comportamiento normal. Trata de que si se le asigna un eventListener a un elemento A, digamos un <div>, que a su vez tiene otro elemento dentro, digamos un <buttom> que también se le asignó el mismo tipo de eventListener, digamos el evento «click»; esto va a disparar tanto el eventLIstener del elemento A como del elemento B, y es obvio.
Si queremos extraer, así diría yo, el evento del elemento B del marco del elemento A, es decir, que cuando se produzca el click en el elemento B, dispare solo el eventListner de ese elemento (el B) e ignore el eventListener del elemento A, podemos usar el método .stopPropagation().
Método .stopPropagation()
Esto es para evitar que los eventos se propaguen hacia otros elementos.
const cardDiv = document.querySelector('.card');
const cardDivButtomInfo = document.querySelector('.btn-Info');
cardDiv.eventListener('click', e => {
console.log('click card');
});
cardDivButtomInfo.addEventListener('click', e => {
e.stopPropagation();
console.log('click botón info');
})Lo anterior va a hacer que cuando se haga clic en cualquier parte del elemento con la clase .card se dispare el eventListener, pero solo cuando se haga clic en un sub elemento con la clase .btn-info (que se encuentra dentro del elemento con la clase .card y por ende, dentro el marco de su propio eventListner) se ejecute su propio eventListener pero se ignore el evento para el elemento superior con la clase .card.
En pocas palabras, como su nombre lo indica, no se propaga.
Técnica delegation para prevenir el event bubbling
En vez de aplicar el método anterior para evitar el event Bubbling podemos simplemente, una vez declarado el evento, usar una estructura de control «if» para determinar primero a qué se le está dando clic dentro del elemento y así asignarle acciones específicas para cada uno.
const cardDiv = document.querySelector('.card');
cardDiv.addEventListener('click', e => {
if(e.target.classList.contains('titulo')) {
console.log('click titulo');
}
if(e.target.classList.contains('info')) {
console.log('click info');
}
});El método .onClick
Este método es una alternativa al eventListener y también como una técnica que evita el eventBubbling. Aunque yo lo veo como algo que tiene su propio propósito.
Cuando se está creando html con JavaScript y queremos que cierto elemento creado reaccione a un clik podemos optar por aplicarle este método y no crear un eventListener.
A continuación el extracto de un código donde un elemento html creado con JavaScript se le aplicó el método onClick y más abajo se declaró la función requerida.
// Segundo parrafo
const parrafo2 = document.createElement('P');
parrafo2.textContent = 'Concierto de Rock';
parrafo2.classList.add('titulo');
// 3er parrafo...
const parrafo3 = document.createElement('p');
parrafo3.textContent = '$800 por persona';
parrafo3.classList.add('precio');
parrafo3.onclick = function() { //Aquí se está usando el método onClick
nuevaFuncion(1)
};
// crear el div...
const info = document.createElement('div');
info.classList.add('info');
info.appendChild(parrafo1)
info.appendChild(parrafo2)
info.appendChild(parrafo3);
// Vamos a crear la imagen
const imagen = document.createElement('img');
imagen.src = 'img/hacer2.jpg';
// Crear el Card..
const contenedorCard = document.createElement('div');
contenedorCard.classList.add('contenedorCard');
// Vamos a asignar la imagen al card...
contenedorCard.appendChild(imagen);
// y el info
contenedorCard.appendChild(info);
// Insertarlo en el HTML...
const contenedor = document.querySelector('.hacer .contenedor-cards');
contenedor.appendChild(contenedorCard); // al inicio info
function nuevaFuncion(id) { //Aquí se declaró la función especialmente creada para el elemento con el onClick
console.log('click..', id)
}