Solução da aula utilizando o handlerClick: | JavaScript: manipulando elementos no DOM

Seleção de Elementos no HTML:
```
const btn = document.querySelectorAll('button');
const html = document.querySelector('html');
const imagem = document.querySelector('.app__image');
```
- Neste trecho, estamos selecionando todos os elementos <button> e o elemento <html> no documento HTML. Além disso, estamos selecionando um elemento de imagem com a classe 'app__image'.
Declaração de uma Função de Manipulação de Eventos:
```
function handleClick(event) {
    const dataContexto = event.currentTarget.getAttribute('data-contexto');

    if (dataContexto) {
        console.log(`Botão ${dataContexto} clicado`);
        html.setAttribute('data-contexto', dataContexto);
        imagem.src = `/imagens/${dataContexto}.png`;
    }
}
```
- Aqui, definimos uma função chamada handleClick. Essa função será executada sempre que um botão for clicado.
- A função recebe um parâmetro event, que representa o evento de clique. Isso permite que a função saiba qual elemento foi clicado e obtenha informações sobre esse evento.
- Dentro da função handleClick, obtemos o valor do atributo data-contexto do botão que foi clicado usando event.currentTarget.getAttribute('data-contexto'). Isso nos permite identificar qual botão foi clicado.
- Em seguida, verificamos se o valor de dataContexto existe (ou seja, se não é null ou undefined). Se existir, significa que o botão clicado possui um atributo data-contexto.
- Se o dataContexto existir, realizamos as seguintes ações:
  - Registramos uma mensagem no console informando qual botão foi clicado, como "Botão short clicado".
  - Definimos o atributo data-contexto do elemento <html> com o valor do dataContexto. Isso permite que a página reaja de acordo com o botão clicado, alterando o contexto.
  - Atualizamos o atributo src da imagem (elemento com classe 'app__image'). Isso é feito construindo o caminho da imagem desejada usando o valor de dataContexto e adicionando ".png" a ele. Por exemplo, se dataContexto for 'short', o caminho será /imagens/short.png.
Adição de Listeners de Eventos aos Botões:
```
btn.forEach((element) => {
    element.addEventListener('click', handleClick);
});
```
- Neste trecho, usamos um loop forEach para percorrer todos os botões selecionados (<button>) que foram armazenados na variável btn.
- Para cada botão, adicionamos um ouvinte de evento de clique usando element.addEventListener('click', handleClick). Isso significa que sempre que um botão for clicado, a função handleClick será chamada para lidar com o evento de clique.

Em resumo, esse código realiza o seguinte:

Seleciona todos os botões, o elemento HTML e um elemento de imagem no documento.
Define uma função de manipulação de eventos (handleClick) que é responsável por identificar qual botão foi clicado, exibir uma mensagem no console, atualizar o atributo data-contexto do elemento HTML e modificar a imagem exibida com base no botão clicado.
Adiciona um ouvinte de evento de clique a cada botão para chamar a função handleClick quando um botão for clicado.
Quando um botão é clicado, a função handleClick é executada, realizando todas as ações descritas acima. Isso permite que os botões controlem o contexto da página, alterando o atributo data-contexto do elemento HTML e a imagem exibida. É um exemplo de como os ouvintes de eventos podem ser usados para tornar uma página interativa e responsiva às ações do usuário.

Mergulhe em programação