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.
- Neste trecho, é selecionado todos os elementos
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 atributodata-contextodo elemento que foi clicado usandoevent.currentTarget.getAttribute('data-contexto'). Isso nos permite identificar qual botão foi clicado.Em seguida, verificamos se o valor de
dataContextoexiste (ou seja, se não énullouundefined). Se existir, significa que o botão clicado possui um atributodata-contexto.Se o
dataContextoexistir, registramos uma mensagem no console informando qual botão foi clicado e definimos o atributodata-contextodo elemento<html>com o valor dodataContexto. Isso permite que a página reaja de acordo com o botão clicado.
Adição de Listeners de Eventos aos Botões:
btn.forEach((element) => { element.addEventListener('click', handleClick); });Neste trecho, usamos um loop
forEachpara percorrer todos os botões selecionados (<button>) que foram armazenados na variávelbtn.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çãohandleClickserá chamada para lidar com o evento de clique.