Tipos de Eventos

Eventos são ações ou ocorrências que acontecem no sistema do navegador que você está controlando através do JavaScript, que então pode responder a esses eventos conforme necessário. Eventos podem ser gerados tanto por interações humanas quanto por APIs do navegador. Aqui estão alguns dos tipos de eventos mais comuns em JavaScript:

1. click:

   • Ocorre quando o usuário clica em um elemento. É um dos eventos mais utilizados para capturar interações do usuário com a página.

   Exemplo:

   element.addEventListener('click', function() {
       console.log('Elemento clicado!');
   });
   

2. load:

   • Disparado quando um recurso e seus recursos dependentes terminaram de carregar. Este evento é frequentemente usado em window ou document para executar código depois que a página inteira é carregada.

   Exemplo:

   window.addEventListener('load', function() {
       console.log('Página completamente carregada!');
   });
   

3. hover (tecnicamente mouseenter e mouseleave):

   • Não há um evento hover específico, mas é simulado através do uso de mouseenter e mouseleave. mouseenter ocorre quando o cursor do mouse entra sobre o elemento e mouseleave quando sai.

   Exemplo:

   element.addEventListener('mouseenter', function() {
       console.log('Mouse agora está sobre o elemento!');
   });
   element.addEventListener('mouseleave', function() {
       console.log('Mouse deixou o elemento!');
   });
   

4. scroll:

   • Disparado quando o elemento ou a janela é rolada. Útil para criar efeitos de paralaxe ou para carregar conteúdo dinamicamente quando o usuário rola a página.

   Exemplo:

   window.addEventListener('scroll', function() {
       console.log('A página está sendo rolada!');
   });
   

Estes são apenas alguns exemplos dos eventos que você pode manipular com JavaScript. Cada um destes eventos pode ser usado para criar uma interação rica e envolvente com o usuário.

Adicionar e Remover Ouvintes de Eventos

Adicionar Ouvintes de Eventos com addEventListener()

O método addEventListener() é usado para registrar um ouvinte de evento no elemento especificado. Este método permite que você especifique o tipo de evento a ser ouvido e a função a ser chamada quando o evento ocorrer, sem sobrescrever outros ouvintes de eventos que possam estar registrados no mesmo elemento.

Sintaxe Básica:

element.addEventListener(eventType, handlerFunction, useCapture);

• eventType: uma string representando o tipo de evento a escutar (como "click", "load", "scroll").
• handlerFunction: a função a ser chamada quando o evento ocorrer.
• useCapture (opcional): um booleano que indica se o evento deve ser capturado na fase de captura, antes de ser disparado na fase de bolha.

Exemplo de Uso:

let button = document.getElementById('myButton');
button.addEventListener('click', function() {
    alert('Botão clicado!');
});