O que é um receptor de eventos?
Um receptor de eventos é uma função em JavaScript que espera que um evento ocorra e depois responde a ele. JavaScript é uma linguagem de programação usada por desenvolvedores para fazer páginas interativas da Internet. A função de receptor de eventos do JavaScript permite que você crie respostas personalizadas para eventos, como cliques do mouse, cliques do teclado e redimensionamento de janelas. O paradigma de programação de esperar e responder a eventos em tempo real é chamado de gerenciamento de eventos.
Qual é a sintaxe da função de receptor de eventos?
A função de receptor de eventos compartilha características semelhantes a outras funções do JavaScript. Quando ativado, ele executa a ação necessária para processar o evento. Por exemplo, a função de receptor de eventos pode alterar o texto exibido, coletar informações de formulários de registro ou armazenar dados em bancos de dados.
Sintaxe do receptor de eventos
Uma função de receptor de eventos segue a sintaxe correta do JavaScript, como no próximo exemplo.
função RespondMouseClick() {
document.getElementById("textdisplay1").innerHTML += "MouseClick happened" ;
}
Este exemplo mostra a função de receptor de eventos RespondMouseClick. É comum escrever o nome da função para refletir a finalidade do receptor de eventos. Na função, você escreve códigos para realizar ações específicas quando o evento ocorre. Neste exemplo, a função acrescenta o texto MouseClick happened ao elemento HTML textdisplay1.
Sintaxe do gerenciador de eventos
Como alternativa, você pode usar uma função de gerenciador de eventos para responder ao evento ativado, como no exemplo a seguir.
function eventHandler(event) {
if (event.type === "fullscreenchange") {
console.log (“full screen toggle”);
} else {
console.log (“full screen error”);
}
}
Isso permite gerenciar vários tipos de eventos de um elemento específico com uma função.
Por exemplo, você pode registrar um receptor de eventos para gerenciar todos os tipos de eventos de blockchain em aplicações baseadas em eventos. Para obter mais informações, leia sobre a criação de uma aplicação baseada em eventos com o Amazon Managed Blockchain.
Como você adiciona um receptor de eventos?
Um receptor de eventos só será ativado depois que você adicioná-lo ao respectivo elemento JavaScript. Para fazer isso, você poderá usar uma sintaxe como esta:
- element.addEventListener(evento, receptor);
- element.addEventListener(evento, receptor, useCapture);
- element.addEventListener(evento, receptor, opções);
Por exemplo, os desenvolvedores podem chamar a função a seguir para vincular o receptor de eventos de clique a um elemento do botão.
btn.addEventListener("click", RespondMouseClick);
Você também pode adicionar vários receptores de eventos a um objeto de evento específico sem sobrescrever os gerenciadores de eventos existentes.
Por exemplo, a Amazon Web Services (AWS) permite que os desenvolvedores encadeiem vários retornos de chamada no objeto AWS.Request. Para obter mais informações, leia como usar um receptor de eventos de objeto de solicitação na AWS.
Parâmetros para adicionar eventos
Aqui está uma explicação dos parâmetros na sintaxe anterior:
- O parâmetro do evento é qualquer evento de JavaScript válido, como clicar, alterar, passar o mouse, pressionar tecla e carregar.
- O parâmetro do receptor é o retorno de chamada do evento ou a função JavaScript criada para responder a eventos específicos.
- O parâmetro useCapture é um parâmetro opcional que indica o modo de propagação do evento. Ele aceita valores booleanos, em que true ativa a captura, enquanto false ativa o borbulhamento. O valor padrão desse parâmetro é definido como false.
- O parâmetro de opções consiste em vários valores opcionais, incluindo modo de captura e sinais de rejeição, que representam os comportamentos do receptor.
Como você remove um receptor de eventos?
Os receptores de eventos permanecem ativos até que você os remova dos elementos JavaScript associados. Você pode usar a sintaxe a seguir para fazer isso.
element.removeEventListener(tipo, receptor, useCapture);
Os parâmetros de remoção do receptor de eventos são semelhantes aos que você usa para adicionar receptores de eventos. Ao remover um receptor de eventos, você deve especificar o mesmo tipo, receptor e parâmetros do useCapture. Se você não fizer isso, o receptor de eventos permanecerá ativo e continuará acionando eventos futuros.
Por exemplo, você pode adicionar um evento com o código a seguir.
button.addEventListener("click", RespondMouseClick, true);
Porém, a aplicação do código a seguir não removerá o receptor de eventos. Isso porque o valor useCapture é diferente daquele registrado com o objeto do botão.
button.removeEventListener("click", RespondMouseClick, false);
Para remover com êxito o evento e evitar que ele seja acionado, você pode usar o código a seguir.
button.removeEventListener("click", RespondMouseClick, true);
Como funcionam as funções aninhadas do receptor de eventos?
Os receptores de eventos aninhados são gerenciadores de eventos adicionados aos elementos HTML em diferentes camadas hierárquicas.
No exemplo HTML a seguir, o documento possui o elemento pai subjacente, enquanto o pai é dono do filho.
<div class="document">
<div class="parent">
<div class="child"></div>
</div>
</div>
Aplicações Web complexas podem ter várias camadas pai-filho com as respectivas funções de receptores de eventos. Quando um evento específico ocorre, ele aciona os receptores de eventos em diferentes camadas em uma ordem específica. Por exemplo, clicar em um botão secundário propagará o evento para todos os manipuladores que capturam um clique do mouse.
Os eventos podem se propagar em dois modos: borbulhamento e captura.
Evento de borbulhamento
O borbulhamento é o modo padrão de gerenciamento de eventos em JavaScript. Ele propaga o evento da camada mais interna para a camada mais externa.
Por exemplo, um usuário pode passar o mouse sobre uma caixa de texto na seção secundária. Em seguida, a aplicação pode passar pelo evento na seguinte ordem:
- O receptor de eventos no componente secundário gerencia o evento de passar o mouse.
- Em seguida, o receptor de eventos principal processa o evento e passa o controle para o receptor de eventos do documento.
Para configurar o evento borbulhamento, use a seguinte sintaxe:
- element.addEventListener(evento, receptor, [falso]);
- element.addEventListener(evento, receptor);
Captura de eventos
A captura de eventos é um modo especial de tratamento de eventos em JavaScript, no qual o evento se propaga internamente, começando da camada mais externa. Quando o evento atinge o elemento alvo na camada interna, o modo de gerenciamento de eventos muda para “borbulhamento”. O borbulhamento então propaga o evento externamente, até a camada mais superior.
Por exemplo, um usuário pode clicar no botão de um filho e iniciar a seguinte sequência:
- O receptor de eventos do documento processa o evento clique do mouse, seguido pelo gerenciador de eventos principal.
- O evento atinge o elemento alvo, que é o botão. O receptor de eventos do botão processa o evento.
- O gerenciamento de eventos muda do modo de captura para o modo de borbulhamento.
- O mesmo evento de clique do mouse aciona o gerenciador de eventos no principal, antes de terminar no documento.
Como escolher entre borbulhamento e captura
Os modos borbulhamento e captura permitem lidar com eventos de forma diferente. O borbulhamento raramente é usado, pois a captura é suficiente para gerenciar a maioria dos eventos nas aplicações.
Ao decidir entre borbulhamento e captura, considere o fluxo de propagação do evento e como ele se alinha com a lógica de programação da sua aplicação.
Por exemplo, considere um formulário principal que consiste em dois elementos secundários. O primeiro elemento requer uma atualização imediata quando ocorre um evento no segundo elemento. Nesse caso, você deve usar o modo de captura. Ele garante que o receptor do evento principal processe o evento e atualize o primeiro elemento. Em seguida, ele passa o controle para o receptor do evento no segundo elemento secundário.
Como você interrompe a propagação de eventos nas funções de receptor de eventos aninhados?
Os eventos se propagam até chegarem ao destino final em uma estrutura de receptores aninhados. Você precisa usar métodos específicos para impedir que o evento se propague ainda mais.
O método a seguir interrompe o evento no receptor dele.
event.stopPropagation();
Por exemplo, se você chamar StopPropagation no botão secundário, o evento de clique do mouse não se propagará para os níveis principal e do documento. Portanto, receptores de eventos no nível superior não serão acionados.
Interromper toda a propagação de eventos
StopPropagation interrompe somente a propagação do tipo atual de evento. Se o objeto tiver diferentes tipos de receptores de eventos registrados, eles ainda serão acionados apesar da chamada StopPropagation.
Para interromper todos os eventos relacionados a um objeto específico, você pode usar o método StopImmediatePropagation, da seguinte forma.
event.stopImmediatePropagation();
Quando um receptor de eventos chama StopImmediatePropagation, nenhum outro receptor de eventos associado ao objeto será acionado.
Como a AWS pode cumprir os seus requisitos de JavaScript?
A Amazon Web Services (AWS) oferece o AWS SDK para JavaScript facilitando o uso de serviços em suas aplicações com bibliotecas e APIs.
Você pode usar o SDK para desenvolver aplicações Web e aplicativos Web móveis no lado do servidor. O SDK oferece suporte ao runtime de JavaScript, Node.JS e React Native, bem como ao runtime cruzado. Isso permite que os desenvolvedores executem o mesmo pacote de serviços do cliente em plataformas diferentes.
Estes são outros benefícios de usar o SDK:
- O SDK é escrito em TypeScript. Isso oferece benefícios como verificação de tipo estático e suporte a classes e módulos.
- O SDK oferece uma pilha de middleware que permite que você introduza ações personalizadas.
- O SDK tem uma arquitetura modular. Isso permite que você use somente os pacotes necessários para otimizar a performance da aplicação.
Comece a usar aplicações de JavaScript inscrevendo-se em uma conta da AWS hoje mesmo.
Próximas etapas na AWS
Obtenha acesso instantâneo ao nível gratuito da AWS.
