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 é adicionadoevent: o tipo de evento que você deseja ouvir (por exemplo, 'click', 'input', 'keydown')handler: a função que será chamada quando o evento ocorreroptions: 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.
<!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.
<!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: setrue, o manipulador será chamado apenas uma vez e, em seguida, removido automaticamentecapture: setrue, o evento é processado durante a fase de captura ao invés da fase de propagaçãopassive: setrue, 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.
<!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á removidoevent: o tipo de evento cujo manipulador precisa ser removidohandler: a função que foi designada como manipulador de eventosoptions: 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.
<!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>
GO TO FULL VERSION