1
resposta

Desafio do evento de Click utilizando um método diferente.

  1. Seleção de Elementos no HTML:

    const btn = document.querySelectorAll('button');
    const html = document.querySelector('html');
    
    • Neste trecho, é selecionado todos os elementos <button> e o elemento <html> no documento HTML.
  2. 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);
        }
    }
    
    • Aqui, é definido 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 elemento 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, registramos uma mensagem no console informando qual botão foi clicado e 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.

  3. 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.

1 resposta

Oi Daivis, tudo bem?

Seu código está bem estruturado e documentado e pronto para lidar com eventos de clique nos botões do HTML.

Muito obrigada por compartilhar com a gente!

Continue os bons estudos.

Um abraço.