A manipulação de eventos em JavaScript utilizando `addEventListener` permite que você associe funções a eventos específicos de elementos HTML, como cliques, movimentos do mouse, entre outros. Para associar uma função a um evento de clique em um botão HTML, você pode seguir os seguintes passos: 1. Selecionar o elemento: Primeiro, você precisa selecionar o botão usando `document.querySelector` ou outro método de seleção. ```javascript const botao = document.querySelector('#meuBotao'); ``` 2. Definir a função: Em seguida, você define a função que será executada quando o evento ocorrer. ```javascript function minhaFuncao() { alert('Botão clicado!'); } ``` 3. Adicionar o evento: Por fim, você usa `addEventListener` para associar a função ao evento de clique. ```javascript botao.addEventListener('click', minhaFuncao); ``` ### Vantagens do `addEventListener` sobre `onclick`: - Múltiplos eventos: Com `addEventListener`, você pode adicionar múltiplos ouvintes para o mesmo evento em um único elemento, enquanto `onclick` só permite um. - Separação de preocupações: Usar `addEventListener` ajuda a manter o JavaScript separado do HTML, promovendo um código mais limpo e organizado. - Remoção de eventos: É possível remover um evento específico usando `removeEventListener`, o que não é possível com `onclick`. Essas características tornam `addEventListener` uma abordagem mais flexível e poderosa para manipulação de eventos em JavaScript.