LabEx
EntrarJunte-se

Introdução a Eventos em JavaScript

Beginner

This tutorial is from open-source community. Access the source code

Introdução

Bem-vindo à documentação JavaScript! Este laboratório fornecerá uma introdução aos eventos.

Este é um Lab Guiado, que fornece instruções passo a passo para ajudá-lo a aprender e praticar. Siga as instruções cuidadosamente para completar cada etapa e ganhar experiência prática. Dados históricos mostram que este é um laboratório de nível iniciante com uma taxa de conclusão de 100%. Recebeu uma taxa de avaliações positivas de 100% dos estudantes.

Eventos

index.html já foi fornecido na VM.

A real interatividade em um site requer manipuladores de eventos. Estas são estruturas de código que escutam por atividade no navegador e executam código em resposta. O exemplo mais óbvio é o tratamento do evento de clique, que é disparado pelo navegador quando você clica em algo com o mouse. Para demonstrar isso, insira o seguinte no seu console e, em seguida, clique na página web atual:

document.querySelector("html").addEventListener("click", function () {
  alert("Ai! Pare de me cutucar!");
});

Há várias maneiras de anexar um manipulador de eventos a um elemento. Aqui, selecionamos o elemento <html>. Em seguida, chamamos sua função addEventListener(), passando o nome do evento a ser escutado ('click') e uma função para ser executada quando o evento acontecer.

A função que acabamos de passar para addEventListener() aqui é chamada de função anônima, porque não tem um nome. Há uma maneira alternativa de escrever funções anônimas, que chamamos de arrow function (função de seta). Uma função de seta usa () => em vez de function ():

document.querySelector("html").addEventListener("click", () => {
  alert("Ai! Pare de me cutucar!");
});

Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Resumo

Parabéns! Você concluiu o laboratório de Eventos. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.