8.1 Criando Eventos Customizados
Eventos customizados no JavaScript permitem que desenvolvedores criem e disparem seus próprios eventos, o que pode ser útil para passar informações e interagir entre diferentes partes da aplicação. Criar e usar esses eventos pode melhorar a estrutura e flexibilidade do seu código, oferecendo uma maneira de notificar e controlar o estado da aplicação.
Para criar eventos customizados, usamos o construtor CustomEvent. Este construtor permite criar novos eventos com parâmetros personalizáveis e dados adicionais.
Sintaxe:
const event = new CustomEvent(type, {detail: additionalData});
Onde:
type: string, representando o nome do eventodetail: objeto contendo dados adicionais que serão passados junto com o evento
Exemplo de criação de um evento customizado:
const myEvent = new CustomEvent('myCustomEvent', { detail: { message: 'Olá, mundo!' } });
8.2 Disparando Eventos Customizados
Disparar um evento é feito com o método dispatchEvent. Este método é chamado no elemento onde o evento deve ocorrer.
Explicação:
- Adiciona-se um listener para o evento
myCustomEventno botãomyButton, que imprime no console a mensagem dos dados do evento - Criamos um evento customizado
myCustomEventcom uma mensagem nodetail - O evento é disparado no botão
myButton, chamando o listener e imprimindo a mensagem no console
Exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Custom Event Example</title>
</head>
<body>
<button id="myButton">Button</button>
<script>
const button = document.getElementById('myButton');
// Adicionando listener para o evento customizado
button.addEventListener('myCustomEvent', function(event) {
console.log('Evento customizado recebido:', event.detail.message);
});
// Criando e disparando evento customizado
const myEvent = new CustomEvent('myCustomEvent', { detail: { message: 'Olá, mundo!' } });
button.dispatchEvent(myEvent);
</script>
</body>
</html>
8.3 Aplicações de Eventos Customizados
Eventos customizados são úteis para criar código mais modular e mantível, especialmente quando se trabalha com componentes e aplicações complexas. Eles permitem que um componente notifique outros componentes sobre mudanças ou ações que ocorreram.
Explicação:
- O Módulo A dispara um evento customizado
notifyBno elementomoduleB, passando dados - O Módulo B ouve o evento
notifyBe o processa, imprimindo uma mensagem no console
Exemplo de uso de eventos customizados em uma aplicação modular:
<!DOCTYPE html>
<html>
<head>
<title>Module Communication Example</title>
</head>
<body>
<div id="moduleA">Module A</div>
<div id="moduleB">Module B</div>
<script>
const moduleA = document.getElementById('moduleA');
const moduleB = document.getElementById('moduleB');
// Módulo A dispara um evento customizado
function notifyModuleB() {
const event = new CustomEvent('notifyB', { detail: { message: 'Dados do Módulo A' } });
moduleB.dispatchEvent(event);
}
// Módulo B ouve o evento customizado
moduleB.addEventListener('notifyB', function(event) {
console.log('Módulo B recebeu:', event.detail.message);
});
// Simulação de ação no Módulo A
notifyModuleB();
</script>
</body>
</html>
8.4 Parâmetros de Eventos Customizados
Eventos customizados podem ser adicionalmente configurados com os seguintes parâmetros:
bubbles: valor booleano indicando se o evento deve borbulhar. Por padrão, éfalsecancelable: valor booleano indicando se o evento pode ser cancelado. Por padrão, éfalsecomposed: valor booleano indicando se o evento deve propagar além do Shadow DOM. Por padrão, éfalse
Exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Custom Event Parameters Example</title>
</head>
<body>
<div id="container">
<button id="myButton">Button</button>
</div>
<script>
const container = document.getElementById('container');
const button = document.getElementById('myButton');
// Adicionando listeners para container e botão
container.addEventListener('customEvent', function(event) {
console.log('Container recebeu:', event.detail.message);
});
button.addEventListener('customEvent', function(event) {
console.log('Button recebeu:', event.detail.message);
});
// Criando e disparando evento customizado com parâmetros
const myEvent = new CustomEvent('customEvent', {
detail: { message: 'Olá do botão' },
bubbles: true,
cancelable: true,
composed: false
});
button.dispatchEvent(myEvent);
</script>
</body>
</html>
GO TO FULL VERSION