Manipuladores de eventos JavaScript
Em JavaScript, um evento é uma ação que ocorre em uma página da web dentro do navegador. Esta ação pode estar digitando em um campo, clicando em um botão ou carregando uma página. As ações podem ser iniciadas pelo navegador ou pelo usuário; Quando qualquer ação ocorre em uma página da web, o navegador notifica o sistema em que um evento ocorreu. Os desenvolvedores podem então responder a esses eventos escrevendo funções conhecidas como manipuladores de eventos.Os manipuladores de eventos são funções que ouvem um tipo específico de evento e quando esse evento ocorre, eles executam um bloco de código.
O que é manuseio de eventos
Um evento é acionado sempre que um usuário interage com uma página da web. Este evento pode ser qualquer coisa de um usuário clicando em algum lugar da página para carregar uma página da web.
Sempre que um evento ocorre em uma página da web, o navegador notifica o sistema; Funções específicas do manipulador de eventos Ouça seus respectivos eventos e quando esses eventos são acionados, eles executam o bloco de código escrito dentro deles. O código escrito dentro da função contém todas as ações que precisam ser executadas em resposta ao evento que está sendo disparado.
Neste post, teremos uma discussão detalhada sobre diferentes tipos de eventos em JavaScript e como lidar com esses eventos.
Observação: Vou usar o console para demonstrar os exemplos presentes neste post.
Quais são os diferentes tipos de eventos?
Alguns dos eventos mais comuns que ocorrem em JavaScript são:
Eventos de mouse:
- ONCLICK
- Mousedown
- MouseUp
- mousemove
Eventos de teclado:
- keydown
- keyUp
Formulário de eventos:
- No foco
- onblur
Eventos de janela:
- carregando
- OnError
A lista de todos os eventos que ocorrem no JavaScript é enorme; Discutiremos apenas os eventos mais comuns e amplamente usados.
Como usar o evento de clique em javascript
O OnClick () O manipulador de eventos é usado para ouvir os eventos de clique em uma página da web. Sempre que o usuário clica em um elemento HTML em uma página da web, seus respectivos OnClick () manipulador de eventos é acionado.
Agora, vejamos um exemplo para ter uma compreensão clara do manipulador de eventos de clique:
Temos uma página da web com dois botões i.e. Botão 1 e botão 2:
Se clicarmos em qualquer um desses botões, seus respectivos OnClick () O manipulador de eventos é acionado, o que imprime uma mensagem no console.
Como usar o evento de foco em javascript
O No foco() O evento é acionado quando um elemento fica ou perde o foco:
Por exemplo, no trecho de código dado abaixo, o “Focusevent ()” o método é chamado no No foco() evento no entrada marcação:
Html
Digite algo aqui
JavaScript
functionFocusevent ()documento.getElementById ("input1").estilo.Antecedentes = "verde";
Como usar o evento KeyDown em JavaScript
O onkeydown () O evento é acionado quando uma tecla é pressionada pelo usuário:
Por exemplo, no código a seguir, o “KeyDownEvent ()” A função é chamada no “Onkeydown” Evento e a mensagem de alerta é mostrada na definição da função:
Html
Digite algo aqui
JavaScript
function keydownownevent ()documento.getElementById ("input1");
alerta ("pressionado uma tecla");
Como usar o evento de carga em javascript
O carregando() O evento é acionado logo após a página da web ter sido carregada com sucesso.
Por exemplo, no trecho de código dado abaixo, uma mensagem de alerta simples é exibida no carregando() evento no corpo marcação:
Eventos JavaScript
Conclusão
Os eventos são muito importantes para tornar qualquer página da web interativa e responsiva. Um evento pode ser iniciado pelo navegador ou pelo usuário. Quando um usuário interage com os elementos HTML de uma página da web, um evento é acionado. O JavaScript nos dá a opção de responder a esses gatilhos usando manipuladores de eventos. Neste guia de instruções, aprendemos a usar os manipuladores de eventos para responder a eventos e tornar as páginas da web mais responsivas.