CodeGym/Cursos/Frontend SELF PT/Trabalhando com Eventos

Trabalhando com Eventos

Disponível

5.1 Noções básicas sobre Eventos

Eventos no JavaScript permitem que você interaja com o usuário e reaja às suas ações, como cliques do mouse, pressionamentos de teclas, alterações em formulários e muito mais. Entender como adicionar e remover manipuladores de eventos é uma parte importante do desenvolvimento de aplicativos web interativos.

O que são eventos?

Um evento é um sinal do navegador que informa que algo aconteceu. Por exemplo, o usuário clicou em um botão ou a página foi carregada. Os eventos permitem executar determinadas ações em resposta a esses sinais.

Tipos de eventos

Existem muitos tipos de eventos. Alguns dos mais utilizados incluem:

  • Mouse: click, dblclick, mouseover, mouseout, mousedown, mouseup, mousemove
  • Teclado: keydown, keyup, keypress
  • Formulário: submit, change, focus, blur
  • Documento/Janela: load, resize, scroll, unload

Manipuladores de eventos

Manipuladores de eventos (ou ouvintes de eventos) são funções que são executadas em resposta a um determinado evento. Eles "ouvem" por eventos específicos e são disparados quando esses eventos ocorrem.

5.2 Adicionando Manipuladores de Eventos

Adicionando manipuladores de eventos com addEventListener

O método addEventListener permite adicionar manipuladores de eventos aos elementos. Ele oferece mais flexibilidade e controle comparado aos métodos tradicionais de adição de eventos, como o uso de atributos HTML (onclick, onchange, etc.).

Sintaxe:

element.addEventListener(event, handler, options);

Onde:

  • element: o elemento ao qual o manipulador de eventos é adicionado
  • event: o tipo de evento que você deseja ouvir (por exemplo, 'click', 'input', 'keydown')
  • handler: a função que será chamada quando o evento ocorrer
  • options: parâmetros adicionais (argumento opcional)

Exemplo: Adicionando um manipulador de evento click

Neste exemplo, um manipulador de eventos é adicionado a um botão. Quando o usuário clica no botão, uma mensagem de alerta é exibida.

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Event Example</title>
  </head>
  <body>
  <button id="myButton">Click me</button>

  <script>
    const button = document.getElementById('myButton');

    button.addEventListener('click', function() {
      alert('Button clicked!');
    });
  </script>
  </body>
</html>

Exemplo: Adicionando vários manipuladores de eventos

Com o addEventListener é possível adicionar vários manipuladores para um único evento.

Neste exemplo, dois manipuladores de eventos são adicionados a um botão. Quando clicado, ambos os manipuladores são executados em sequência, exibindo mensagens correspondentes no console.

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Event Example</title>
  </head>
  <body>
    <button id="myButton">Click me</button>

    <script>
      const button = document.getElementById('myButton');

      button.addEventListener('click', function() {
        console.log('First handler');
      });

      button.addEventListener('click', function() {
        console.log('Second handler');
      });
    </script>
  </body>
</html>

5.3 Usando o parâmetro options

O parâmetro options permite configurar o comportamento do manipulador de eventos. As opções mais usadas são:

  • once: se true, o manipulador será chamado apenas uma vez e, em seguida, removido automaticamente
  • capture: se true, o evento é processado durante a fase de captura ao invés da fase de propagação
  • passive: se true, indica que o manipulador nunca chamará preventDefault()

Exemplo: Manipulador que executa apenas uma vez

Neste exemplo, o manipulador de eventos será executado apenas uma vez, após o qual será removido automaticamente.

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Event Example</title>
  </head>
  <body>
    <button id="myButton">Click me</button>

    <script>
      const button = document.getElementById('myButton');

      button.addEventListener('click', function() {
        alert('This will be shown only once');
      }, { once: true });
    </script>
  </body>
</html>

5.4 Removendo Manipuladores de Eventos

Removendo manipuladores de eventos com removeEventListener

O método removeEventListener permite remover manipuladores de eventos que foram adicionados com addEventListener. Para isso, é necessário passar os mesmos argumentos que foram usados ao adicionar o manipulador.

Sintaxe:

element.removeEventListener(event, handler, options)

Onde:

  • element: o elemento do qual o manipulador de eventos será removido
  • event: o tipo de evento cujo manipulador precisa ser removido
  • handler: a função que foi designada como manipulador de eventos
  • options: parâmetros adicionais (devem corresponder aos parâmetros usados ao adicionar o manipulador)

Exemplo: Removendo um manipulador de evento click

Neste exemplo, o manipulador de evento click é adicionado a um botão. Pressionar outro botão remove o manipulador de evento click.

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Event Example</title>
  </head>
  <body>
    <button id="myButton">Click me</button>
    <button id="removeButton">Remove Click Handler</button>

    <script>
      const button = document.getElementById('myButton');
      const removeButton = document.getElementById('removeButton');

      function clickHandler() {
        alert('Button clicked!');
      }

      button.addEventListener('click', clickHandler);

      removeButton.addEventListener('click', function() {
        button.removeEventListener('click', clickHandler);
        alert('Click handler removed');
      });
    </script>
  </body>
</html>
1
Tarefa
Frontend SELF PT,  nível 41lição 4
Bloqueado
Vários manipuladores
Vários manipuladores
1
Tarefa
Frontend SELF PT,  nível 41lição 4
Bloqueado
Remoção do Listener
Remoção do Listener
Comentários
  • Populares
  • Novas
  • Antigas
Você precisa acessar para deixar um comentário
Esta página ainda não tem nenhum comentário