Muitas aplicações web dependem de algum tipo de evento para realizar suas funções. Em algum momento, um humano interage com sua interface, o que gera um evento. Esses eventos controlados por humanos geralmente dependem de um dispositivo periférico, como um mouse ou teclado.

Quando um dispositivo cria um evento, o programa pode ouvi-lo, para saber quando realizar um comportamento específico. Neste tutorial, você aprenderá como escutar eventos usando JavaScript.

O que é programação orientada a eventos?

Programação orientada a eventos é o nome de um paradigma que depende da execução de um evento para realizar suas funções. É possível criar um programa orientado a eventos em qualquer linguagem de programação de alto nível. Mas a programação orientada a eventos é mais comum em linguagens como JavaScript que se integram a uma interface de usuário.

O que é um ouvinte de eventos?

Um ouvinte de eventos é uma função que inicia um processo predefinido se ocorrer um evento específico. Assim, um ouvinte de eventos “escuta” uma ação e, em seguida, chama uma função que executa uma tarefa relacionada. Este evento pode assumir uma das muitas formas. Exemplos comuns incluem eventos de mouse, eventos de teclado e eventos de janela.

Criando um ouvinte de eventos usando JavaScript

Você pode ouvir eventos em qualquer elemento no DOM. JavaScript tem um addEventListener() função que você pode chamar em qualquer elemento em uma página da web. O addEventListener() função é um método de Destino do evento interface. Todos os objetos que suportam eventos implementam essa interface. Isso inclui a janela, o documento e elementos individuais na página.

A função addEventListener() tem a seguinte estrutura básica:

element.addEventListener("evento", functionToExecute);

Onde:

• a elemento pode representar qualquer tag HTML (de um botão a um parágrafo)
• a "evento" é uma string que nomeia uma ação específica e reconhecida
• a funçãoParaExecutar é uma referência a uma função existente

Vamos criar a seguinte página da web que possui alguns elementos HTML:

Bem vinda


 Olá, bem-vindo ao meu site.


Saber mais





informação de usuário

Nome do usuário: 

Enviar

O código HTML acima cria uma página simples que vincula a um arquivo JavaScript chamado app.js. O app.js O arquivo conterá o código para configurar os ouvintes de eventos. Portanto, se você deseja iniciar um processo específico sempre que um usuário clicar no primeiro botão da página da Web, este é o arquivo para criá-lo.

O arquivo app.js

document.querySelector('.btn').addEventListener("click", clickDemo)
função clickDemo(){
 console.log("Olá")
}

O código JavaScript acima acessa o primeiro botão da página usando o querySelector() função. Em seguida, ele adiciona um ouvinte de evento a esse elemento usando o addEventListener() método. O evento específico que ele escuta tem o nome “clique”. Quando o botão disparar esse evento, o ouvinte chamará o cliqueDemo() função.

Relacionado: Aprenda a usar seletores DOM

O cliqueDemo() A função imprime “Olá” no console do navegador. Toda vez que você clicar no botão, deverá ver essa saída em seu console.

A saída do evento “clique”

O que são eventos de mouse?

JavaScript tem um MouseEvent interface que representa eventos que ocorrem devido à interação de um usuário com o mouse. Vários eventos utilizam o MouseEvent interface. Esses eventos incluem o seguinte:

• clique
• dblclick
• movimento do mouse
• passe o rato por cima
• mouseout
• mouseup
• mousedown

O clique O evento ocorre quando um usuário pressiona e solta um botão do mouse enquanto o ponteiro está sobre um elemento. Foi exatamente isso que ocorreu no exemplo anterior. Como você pode ver na lista acima, os eventos do mouse podem assumir várias formas.

Outro evento comum do mouse é dblclick, que significa clique duplo. Isso é acionado quando um usuário clica em um botão do mouse duas vezes em rápida sucessão. Uma coisa notável sobre o addEventListener() função é que você pode usá-lo para atribuir vários ouvintes de eventos a um único elemento.

Adicionando um evento dblclick ao primeiro botão

document.querySelector('.btn').addEventListener("dblclick", dblclickDemo)
function dblclickDemo(){
 alert("Esta é uma demonstração de como criar um evento de clique duplo")
}

Adicionar o código acima ao arquivo app.js criará efetivamente um segundo ouvinte de eventos para o primeiro botão na página da web. Portanto, clicar duas vezes no primeiro botão criará o seguinte alerta no navegador:

Na imagem acima você verá o alerta gerado e também verá que mais duas saídas “Olá” estão no console. Isso ocorre porque um evento de clique duplo é uma combinação de dois eventos de clique e existem ouvintes de eventos para os dois clique e a dblclick eventos.

Os nomes dos outros eventos de mouse na lista descrevem seu comportamento. O movimento do mouse O evento ocorre toda vez que um usuário move o mouse quando o cursor está sobre um elemento. O mouseup O evento ocorre quando um usuário mantém pressionado um botão sobre um elemento e o libera.

O que são eventos de teclado?

JavaScript tem um KeyboardEvent interface. Isso escuta as interações entre um usuário e seu teclado. No passado, KeyboardEvent teve três tipos de eventos. No entanto, JavaScript, desde então, depreciou o pressione o botão evento.

Então o teclar e tecla pressionada eventos são os únicos dois eventos de teclado recomendados, que são tudo o que você precisa. O tecla pressionada O evento ocorre quando um usuário pressiona uma tecla e o teclar O evento ocorre quando um usuário o libera.

Revisitando o exemplo de HTML acima, o melhor lugar para adicionar um ouvinte de evento de teclado é no entrada elemento.

Adicionando um ouvinte de eventos de teclado ao arquivo app.js

let saudações = document.querySelector('p');
document.querySelector('input').addEventListener("keyup", captureInput)
função captureInput (e){
 saudações.innerText = (`Olá ${e.target.value}, bem vindo ao meu site.`)
}

O código acima usa o querySelector() função para acessar o parágrafo e entrada elementos da página. Em seguida, chama o addEventListener() método no entrada elemento, que escuta o teclar evento. Sempre que um teclar evento ocorrer, o captureInput() A função pega o valor da chave e o adiciona ao parágrafo na página. O e O parâmetro representa o evento, que o JavaScript atribui automaticamente. Este objeto de evento possui uma propriedade, target, que é uma referência ao elemento com o qual o usuário interagiu.

Neste exemplo, a etiqueta anexada ao entrada campo solicita um nome de usuário. Se você digitar seu nome no campo de entrada, a página da Web ficará assim:

O parágrafo agora contém o valor de entrada que, no exemplo acima, é “Jane Doe”.

addEventListener captura todos os tipos de interação do usuário

Este artigo apresentou-lhe o addEventListener() método, bem como vários eventos de mouse e teclado que você pode usar com ele. Neste ponto, você sabe como ouvir um evento específico e como criar uma função que responda a ele.

O addEventListener fornece capacidade extra, no entanto, por meio de seu terceiro parâmetro. Você pode usá-lo para controlar a propagação de eventos: a ordem na qual os eventos se movem dos elementos para seus pais ou filhos.

Entendendo a propagação de eventos em JavaScript

Os eventos são um poderoso recurso JavaScript. Compreender como um navegador da Web os levanta em relação aos elementos é a chave para dominar seu uso.

Leia a seguir

Sobre o autor