Otros conceptos de eventos

Aca se cubren conceptos basicos que se encuentran a menudo en la sitaxis de eventos.

Objetos de evtentos

En los parametros de una funcion de controlador de evento se puede encontrar con event, evt o e. Esto se denomina objeto de evento y se pasa automaticamente a los controladores de evento para proporcionar caracteristicas e informacion adicional. ⇒

function bgChange(e) {
  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  e.target.style.backgroundColor = rndCol;
  console.log(e);
}

btn.addEventListener('click', bgChange);

el e.target propiedad es realmente util cuando se confugura un controlador de eventos en varios elementos y hacer algo en ellos cuando ocurre el evento. Un ejemplo seria crear un mosaico donde los elementos desaparezcan cuando son clickeados (onda lo que hacen los captchas de seguridad).

La mayoria de eventos tienen un conjunto estandar de propiedades y metodos, disponibles en el objeto de evento, referencia de Event 🔗, sin embargo existen controladores mas avanzados que utilizan acciones especializadas, como por ejemplo ⇒

Prevenir el comportamiento predeterminado

Un ejemplo comun de esto es redefinir el comportamiento natural al llenar los datos en un formulario que sera enviado a un servidor, haciendo que este no se envie si faltan cuadros por rellenar o si existen errores de algun tipo en los cuadros rellenados.

Ejemplo practicos ⇒

se puede lograr esto implementando una verificacion dentro de un controlador de eventos onsubmit (el evento de envio en un formulario se activa cuando se envia), nuestra funcion verificaria si hay campos vacios, si fuera asi se llamaria a la funcion preventDefault()🔗 en el objeto de evento (e), deteniendo el envio del formulario, y al final se podria presentar un mensaje de error al final ⇒

const form = document.querySelector('form');
const fname = document.getElementById('fname');
const lname = document.getElementById('lname');
const para = document.querySelector('p');

form.onsubmit = function(e) {
  if (fname.value === '' || lname.value === '') { //esta seria la verificacion if con un operador O
    e.preventDefault();
    para.textContent = 'You need to fill in both names!';
  }
}

Ebullicion y captura de eventos (Event bubbling and capture)

Cuando tenemos algo como ⇒

<button id="btn">Display video</button>

<div class="hidden" id="videoBox">
  <video>
    <source src="rabbit320.mp4" type="video/mp4">
  </video>
</div>

btn.onclick = function() {
  videoBox.setAttribute('class', 'showing'); 
//haciendo click en el boton hacemos que aparezca el cuadro con el video dentro
};
videoBox.onclick = function() {
  videoBox.setAttribute('class', 'hidden');
//haciendo click en el cuadro hacemos que se oculte
};
video.onclick = function() {
  video.play();
//haciendo clic en el video dentro del cuadro hacemos que comience el video
};

Explicacion de bubbling y capturing ⇒

Cuando se dispara un evento en un elemento que tiene elementos padres (en este caso el video que tiene como padre un div), los navegadores ejecutan dos fases diferentes ⇒

Fase de captura :

En la fase de burbujeo o propagacion ocurre lo contrario:

image by db3pap006files.storage.live.com

Solucionando el problema con stopPropagation()

El estandar Event objeto tiene una funcion que permite evitar la propagacion, stopPropagation() que cuando se invoca en el objeto de evento de un controlador, se ejecutara el primero pero no se propaga, por lo que no se ejecutan mas controladores. Esto no da una solucion al problema anterior sin necesidad de agregar mas elementos ⇒

video.onclick = function(e) {
  e.stopPropagation();
  video.play();
};

Delegacion de eventos

La delegacion de eventos hace uso del efecto bubbling para "colocar eventos a varios elementos" por medio de un evento al elemento padre, en lugar de crear un evento para cada uno de los hijos, esto tiene ventajas ⇒

Esto funcionaria de la siguiente forma ⇒

<div class="gallery-container">
  <a href="" class="gallery-item"><img src="" alt=""></a>
  <a href="" class="gallery-item"><img src="" alt=""></a>
  <a href="" class="gallery-item"><img src="" alt=""></a>
  <a href="" class="gallery-item"><img src="" alt=""></a>
  <a href="" class="gallery-item"><img src="" alt=""></a>
  <a href="" class="gallery-item"><img src="" alt=""></a>
  <a href="" class="gallery-item"><img src="" alt=""></a>
  <a href="" class="gallery-item"><img src="" alt=""></a>
  <a href="" class="gallery-item"><img src="" alt=""></a>
</div>

// vanilla
let gallery = document.querySelector('.gallery-container');
gallery.addEventListener('click', e => {
  if(e.target.classList.contains('gallery-item')){
    // codigo
  }
});
// jQuery
$('.gallery-container').on('click', '.gallery-item', () =>
  // codigo
);