Ouvinte de eventos Javascript

| | | | |

Adicionar recursos interativos a um site é onde o JavaScript se destaca. Enquanto HTML e CSS são usados respectivamente para definir a estrutura e os estilos de uma página da web, você pode usar JavaScript para tornar seu site mais dinâmico.

Em JavaScript, eventos são usados para criar um site interativo . Neste guia, falaremos sobre eventos JavaScript. Exploraremos onde os eventos podem ser usados, como definir um evento e como chamar um evento. Aqui vamos nós!

O que é um evento JavaScript?

Os eventos podem ser acionados pelo navegador ou pelo usuário e podem alterar o estado da página web. Quando você clica em um botão em uma página da Web, um evento JavaScript é criado. Quando você clica em um menu suspenso em expansão, um evento JavaScript é usado.

Os eventos JavaScript têm uma ampla variedade de usos, incluindo:

  • Verificar se um formulário foi preenchido
  • Mover um usuário para outra página após preencher um formulário
  • Tornar menus suspensos interativos
  • Permitir que um usuário ampliar e reduzir imagens

Para trabalhar com eventos em JavaScript, você precisa conhecer dois conceitos: manipuladores de eventos e ouvintes de eventos.

Um manipulador de eventos é uma função que é executada quando um evento é acionado em uma página da web. Os ouvintes de eventos anexam uma função de evento a um elemento HTML, portanto, quando essa função é executada, o elemento da Web é alterado.

Os manipuladores de eventos podem ser definidos de três maneiras: usando um manipulador de eventos embutido, um event, ou um event listener.

Manipuladores de eventos online

A maneira mais fácil de começar com eventos em JavaScript é usar um gerenciador de eventos online. Isso significa que você definirá seu evento em seu arquivo HTML.

Para este exemplo, suponha que estamos projetar um site para uma padaria chamada JJ Smith`s Bakery. Queremos que um usuário seja solicitado a inserir o texto "Resposta recebida ‚" ao enviar um formulário.

Considere o seguinte código:

Este código exibe uma página da web parecida com esta:

 YhBM86zXeUH6CVstZ3cqjSfPpNHrDi1FRgWXFZMeCKNiTylMsE3TAEvgnvBLnl1zf30hlI6DcqWpXeFiL8YiojTKYJQeJ7 ESoQz4KhfCYhqlT9JmsxZZXRVj0EKBL9jbEaCs4Oe

Até agora, não muito -.. algo que acontece Nossa página web contém um botão que deve fazer algo quando o nosso botão é clicado Quando clicamos em nosso botão, nada acontece. Isso porque ainda temos que escrever nosso manipulador de eventos.

No arquivo main.js, cole o seguinte código:

Este código encontrará o elemento com o id "submit" e alterará seu conteúdo para "Formulário submetido." "Este código só será executado quando nosso submitForm() for chamado. Isso está programado para acontecer quando o usuário clica em nosso botão.

Quando clicamos em nosso botão, acontece o seguinte:

Como você pode ver, nossa mensagem parece. Usamos um gerenciador de eventos online para tornar nossa página interativa. Mas os manipuladores de eventos embutidos não são a única maneira de usar eventos em JavaScript. Vamos ver como usar a propriedade do manipulador de eventos em nosso código.

Eventos com propriedades do manipulador

Em um manipulador embutido, você precisa especificar a função que deseja executar em seu arquivo HTML . Em nosso código HTML anterior, esta linha é onde definimos a função que queríamos chamar quando nosso botão fosse pressionado:

Usando as propriedades do manipulador, podemos remover o comando do evento "onclick" do nosso código. Isso nos permite mover todo o JavaScript que torna nossa página da web interativa em seu próprio arquivo. Para este exemplo, daremos ao nosso botão o ID "button", para que possamos identificar nosso botão no código JavaScript. Removemos o evento onclick e atribuímos um identificador ao nosso botão:

Para acionar nosso evento quando o botão for pressionado, escreveremos um evento com uma propriedade handler dentro de nosso "main". js " . Aqui está o código que usaremos:

Quando você executa este código e clique no botão, a seguinte mensagem é retornada:

4o62 FifBmuVWJDrNanvSaMu6tbum7kfLhkIyJ75xZ3Xt CsRgZsCf8qnj13uN1VyaoDaapwFE4pG BMvjQUHsAa1jLlGtRVPbnmOLDmzr98tzw38e18YY8 Hcaym YGeDzjzFwo

nosso botão funciona da mesma como antes, mas nosso código é escrito de uma maneira diferente. Em vez de escrever nossos manipuladores de eventos inline, nós os movemos para nosso arquivo main.js. Isso nos ajuda a escrever um código mais gerenciável porque não precisamos ler todo o nosso código HTML para saber onde nossos eventos inline são acionados.

Event Listener

Os eventos podem ser usados para declarar um evento em JavaScript. sempre verifique quando o estado de um elemento i é alterado e, se esse elemento for alterado, o código no listener será executado.

Por exemplo, quando você clica em um botão que está conectado a um ouvinte de evento, o ouvinte "ouve" que um evento de mouse foi acionado. Em seguida, ele executará o código que você associou a esse ouvinte de evento específico.

Nosso código HTML para este exemplo é o mesmo acima, mas faremos uma pequena alteração em nosso " mão. js " file:

Neste código, nós vamos usar addEventListener para criar um ouvinte de eventos. Isso é em vez de vincular nossa função JavaScript submitForm() a um evento onclick como fizemos em nossos dois exemplos mais recentes.

Nós especificamos "click" para dizer ao nosso código para ouvir quando nosso botão é clicado com o ponteiro do mouse. Existem outros tipos de eventos além do evento de clique, como eventos de teclado, mas neste tutorial vamos focar no evento de clique do mouse.

Vamos executar o código novamente e clicar no botão.

A saída é a mesma que vimos em nossos dois últimos exemplos, mas desta vez estamos usando um ouvinte de eventos HTML. Os ouvintes de eventos são a maneira mais nova de declarar eventos em JavaScript e talvez sejam o método mais usado.

Conclusão

Os eventos JavaScript permitem que você torne sua página da Web interativa. Um evento pode ser acionado quando você pressiona um botão, envia um formulário ou passa o mouse sobre o texto. Há três maneiras de declarar um evento em JavaScript: inline, usando um propriedade ou usando um ouvinte.

Agora você está pronto para começar a criar eventos JavaScript como um desenvolvedor web profissional!

Shop

Learn programming in R: courses

$

Best Python online courses for 2022

$

Best laptop for Fortnite

$

Best laptop for Excel

$

Best laptop for Solidworks

$

Best laptop for Roblox

$

Best computer for crypto mining

$

Best laptop for Sims 4

$

Latest questions

NUMPYNUMPY

psycopg2: insert multiple rows with one query

12 answers

NUMPYNUMPY

How to convert Nonetype to int or string?

12 answers

NUMPYNUMPY

How to specify multiple return types using type-hints

12 answers

NUMPYNUMPY

Javascript Error: IPython is not defined in JupyterLab

12 answers

News


Wiki

Python OpenCV | cv2.putText () method

numpy.arctan2 () in Python

Python | os.path.realpath () method

Python OpenCV | cv2.circle () method

Python OpenCV cv2.cvtColor () method

Python - Move item to the end of the list

time.perf_counter () function in Python

Check if one list is a subset of another in Python

Python os.path.join () method