O que são eventos JavaScript
Você está andando em um carro e um sinal vem, é vermelho, você para. Quando o sinal fica verde, você começa a dirigir novamente. Suas ações foram baseadas em algum sinal fornecido a você. O mesmo vale para eventos. Quando você está programando, você deseja que algumas ações sejam executadas clicando em um botão ou pressionando uma tecla. O clique do botão ou a pressão de uma tecla gera um evento. Com base neste evento, alguma ação é executada. Por exemplo, há um artigo e um botão que diz “mostre mais”. Quando você clica nesse botão, todo o artigo se torna visível
Neste post, vamos discutir tudo sobre eventos com exemplos.
O que é um evento
Para simplificar, um evento é uma ação executada por um usuário ou iniciada pelo navegador. JavaScript responde/reage a essa ação; Isso reagindo/respondendo ao evento é chamado de manuseio de eventos. O manuseio de eventos é apenas um pedaço de código escrito pelo desenvolvedor. Este pedaço de código é executado quando o evento é acionado. Os manipuladores de eventos também são chamados de ouvintes de eventos. Os eventos são disparados dentro da janela do navegador e estão relacionados ou anexados a um único ou um conjunto de elementos. Os eventos são de muitos tipos diferentes. Alguns deles são:
- O usuário pressiona uma tecla no teclado
- O usuário paira sobre um elemento
- O usuário clica em um elemento via mouse
- Usuário fecha o navegador
- O usuário redimensiona o navegador
- A página da web está carregando ou acabou com o carregamento
- Quando ocorre um erro
- O usuário envia um formulário
Eventos JavaScript
JavaScript fornece -nos um monte de eventos. Listar todos eles e explicar todos eles em um artigo é impossível. Aqui vou listar apenas os mais comuns:
Eventos de entrada
- Bluer
- mudar
- foco
- KeyUp/KeyDown
- pressione o botão
Eventos de mouse
- Passe o rato por cima
- MouseOut
- Mousedown/MouseUp
Clique em eventos
- clique
- DblClick
Carregar eventos
- carregar
- descarregar
- erro
- Redimensionar
Agora que discutimos a teoria, vamos para a praticidade e discutir alguns exemplos da vida real de eventos JavaScript. Suponha que eu tenha um botão e, quando clico nesse botão, quero que um alerta seja mostrado ao usuário. O clique do botão desencadeia o evento e, em seguida, um bloco de código lidará com o evento e reagirá mostrando um alerta.
Este é um botão simples em um arquivo html. Agora vamos obter o botão através do nome da classe e depois lidaremos com o evento I-e Click.
const btn = documento.QuerySelector (".clickme ");btn.addEventListener ('click', function ()
alerta ("você clicou no botão");
);
Coloque este código em uma etiqueta de script ou faça outro arquivo com a extensão JS e coloque -o lá.
Agora, quando clicarmos no botão, será mostrado um alerta:
Também existem outras maneiras de implementar isso, por exemplo:
const btn = documento.QuerySelector (".clickme ");btn.OnClick = function ()
alerta ("você clicou no botão");
;
Ou:
const btn = documento.QuerySelector (".clickme ");função clickedMe ()
alerta ("você clicou no botão");
;
btn.OnClick = clickedMe;
O arquivo html i-e o botão permanece o mesmo.
Observação: Você pode colocar seu código JavaScript em uma tag de script e executar seu arquivo HTML no navegador usando servidor ao vivo ou criar um arquivo diferente com a extensão JS e fazer referência a ele dentro do cabeçalho do arquivo html.
Agora, vejamos outro exemplo: suponha que tenhamos um formulário de registro. Na forma, temos dois campos de entrada e queremos colocar a validação. Se o usuário enviar o formulário, queremos verificar se o usuário encheu as duas entradas ou o deixou vazio. Se ambos ou um deles estiver vazio, mostramos um alerta de que o campo está vazio. Caso contrário, mostramos um alerta que diz que o usuário registrou:
Quando deixamos o campo de senha vazio e clicou no registro, um evento acionado I-E envia. Mas com base em nosso manipulador no campo de entrada “Senha"Estava vazio, portanto, uma mensagem"Por favor, preencha os campos necessários" é mostrado.
Quando enchemos os dois campos e clicamos no botão de registro, “Registrado" foi mostrado.
Conclusão
Eventos e manuseio de eventos são conceitos realmente importantes de JavaScript. Quando um usuário interage com uma página da web, um evento é acionado. O JavaScript fornece manipuladores de eventos para responder a esses eventos e tornar as páginas da web mais interativas, proporcionando experiência imersiva ao usuário. Nesses casos, os manipuladores podemos colocar nosso próprio código e lógica e fazer algo bonito.
Neste post, discutimos brevemente o que são eventos JavaScript e como podemos lidar com eles; Em seguida, passamos para os tipos de eventos e manipuladores de eventos e suas aplicações na vida real.