Resumo da Aula 04-02,03 e 04 da etapa 05

Aula 04-02 - Event bubbling e Event delegation

O elemento no qual o evento aconteceu se torna um target do evento EVENTO > CALLBACK > DISPARO

Event Bubbling

Ao clicar em um elemento, ele se torna o target do evento e a partir disso o javascript procura se existe um listener de eventos e se há alguma função de callback para disparar a ação que deve ser executada nesse elemento.Porém esse evento continua sendo propagado desde o target inicial até o topo do DOM, esse comportamento se chama "Event Bubbling"

Exemplo: Uma "li" clicada dispara um event que se propaga para o evento pai, nesse caso o "ul" e se esse "ul" tiver um função outro event listener e uma função de callback, esse evento será novamente propagado até o evento pai dessa "ul" e assim sucessivamente.

Uma analogia ao "event bubbling" seria uma corrida de revezamento com bastão onde cada participante ao completar sua parte do percurso, passa o bastão para o próximo até o linha de chegada.

Como parar o Event Bubbling

Dentro da função de Callback basta adicionar o comando abaixo que o event bubbling não será propagado em direção aos elementos pais.

event.stopPropagation()

Event Delegation

Em uma aplicação de escala maior, iterar pelo array do elemento e adicionar eventos em cada um pode se tornar algo problemático, além de que a cada nova criação de um elemento ele não puxa o evento das anteriores.... O event delegation é uma maneira melhor de se fazer isso.

Utilizar um único listener de evento

Utilizando o código abaixo podemos obter a referencia da li clicada, mesmo sem ter um evento atrelado diretamente à esse elemento, não importa se a li clicada é nova ou se já existia e estamos utilizando apenas um listener de eventos para essa tarefa.

//Buscando um elemento com apenas um eventListener
ul.addEventListener("click", (event) => {
    console.log(event.target);
  });

Deletando um elemento

Utilizando a propriedade "tagName" do "event" podemos verificar se o elemento clicado satisfaz uma especificação e em seguida tomar uma ação com base nisso.

Exemplo: uma "li"

//Remover uma li utilizando um único eventListener
ul.addEventListener("click", event => {
  const clickedElement = event.target;

  if(clickedElement.tagName === "LI") {
    clickedElement.remove()
  }
})

Mais eventos do DOM - Aula 04-03

Podemos disparar diversos eventos no DOM, abaixo temos uma lista com todos disponíveis

E nesse resumo vamos falar sobre 3 deles...

Evento COPY

Ao copiar algum texto do corpo da página, esse evento capta a ação e permite que algo seja apresentado no console ou no HTML...

no exemplo abaixo, ao copiar algo da tela (utilizando o menu do click do mouse ou atalho CTRL+C) o console apresenta "Texto Copiado", mas qualquer outro tipo de ação poderia ser usada.

//Comando copy
const paragraph = document.querySelector(".copy-me");

paragraph.addEventListener("copy", () => {
  console.log("Texto copiado!");
});`

Evento MOUSEMOVE

O evento "mousemove" capta a "movimentação" do mouse nos vertices X e Y, assim ele define a posição exata do mouse na tela ou no elemento selecionado, no exemplo abaixo estamos a captando a posição do mouse dentro da DIV em cinza e apresentado na mesma, mas essa posição poderia ser apresentada também no console.

Dentro da propriedade event, temos várias outra propriedades uma delas é a offsetX(alinhamento horizontal) e offsetY(alinhamento vertical), utilizando event.offset podemos apresentar em tempo real a posição do mouse.

//Comando mousemove
const div = document.querySelector(".box");

div.addEventListener("mousemove", (event) => {
  div.textContent = `X ${event.offsetX} | Y ${event.offsetY}`;
});

Evento WHEEL

O evento "wheel" capta a "rolagem"(scroll) do mouse nos vertices X e Y, assim ele define a posição exata de quanto a tela desceu com base no ponteiro do mouse, no exemplo abaixo estamos a captando a posição do mouse e apresentando no console.

Dentro da propriedade event, temos várias outra propriedades uma delas é a pageX(alinhamento horizontal) e pageY(alinhamento vertical), utilizando event.page podemos apresentar em tempo real o quanto a tela desceu baseado na posição do mouse.

//Comando wheel
document.addEventListener("wheel", (event) => {
  console.log(event.pageX, event.pageY);
});

Desenvolvendo um popup - Aula 04-04

Nessa aula aprendemos a desenvolver um popup simples e deselegante....

Visual do Popup

Elementos HTML do Popup

button da página

chama o popup.

<button>Clique aqui</button>

popup-wrapper

é a parte desfocada do popup que ocupa toda a tela, geralmente ela tem o background color com a opacidade baixa, permitindo assim que se veja um pouco da pagina de fundo.

<div class="popup-wrapper">

popup

é o popup de fato, geralmente é uma tela branca onde todo o conteúdo é inserido.

<div class="popup">

popup-content

é o container do popup, onde o conteúdo é inserido, centralizado e alinhado, geralmente não tem coloração e serve para posicionamento dos outros elementos.

<div class="popup-content">

popup-close

serve como botão de fechar o popup, apenas um "x" em minúsculo.

<div class="popup-close">

button do popup

é opcional, geralmente é um botão de confirmação ou link para outra página, normalmente ao ser clicado fecha o popup.

<a class='popup-link' href="#">Saiba mais</a>

Elementos Javascript do popup

Chamar o popup

//pegamos a referencia do botão e armazenamos na const button
const button = document.querySelector("button");

//adicionamos um eventListener que altera a propriedade css do elemento  
//clicado, assim o popup passa de "display: none" para "display:block" 
//e o popup magicamente aparece na tela

button.addEventListener("click", () => {
  popup.style.display = "block";
});

Fechar o popup

//pegamos a referencia do "popup-wrapper" e armazenos na const popup
const popup = document.querySelector(".popup-wrapper");

//adicionamos um eventListener que altera o "display:block" para "display:none"
popup.addEventListener("click", () => {
  popup.style.display = "none";
});

//a solução acima funciona porém não é nem de perto a correta
//ao clicar em qualquer lugar da tela inclusive no conteúdo do popup ele fecha.

Fechar o popup corretamente

//vamos adicionar um eventListener para pegar o elemento clicado, em seguida
//salvar em uma constante apenas a classe do elemento clicado nesse caso 
//classList[0] gera um array e o primeiro item dele é a classe do elemento
popup.addEventListener("click", (event) => {
  const classNameOfClickedElement = event.target.classList[0];

//iremos criar um array com as classes dos elementos que ao serem clicados
//DEVEM fechar o popup
const classNames = ["popup-close", "popup-wrapper", "popup-link"];

//vamos criar um const que utilizando o método some(), 
//executa uma função que compara se a classe 
//do elemento clicado "classNameOfClickedElement" 
//está no array "classNames", se estiver ele devolve "true"
const shouldClosePopup = classNames.some(
    (className) => className === classNameOfClickedElement
  );
//iremos executar um if que esconde o popup caso o retorno 
//de "shouldClosePopup" for "true"
if (shouldClosePopup) {
    popup.style.display = "none";
  }
});

@Roger-Melo

roger-melo-treinamentos / curso-de-js-roger-melo