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-contexto
do 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
dataContexto
existe (ou seja, se não énull
ouundefined
). Se existir, significa que o botão clicado possui um atributodata-contexto
.Se o
dataContexto
existir, registramos uma mensagem no console informando qual botão foi clicado e definimos o atributodata-contexto
do 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
forEach
para 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çãohandleClick
será chamada para lidar com o evento de clique.