Aurelia - Eventos

Neste capítulo, você aprenderá sobre os eventos de Aurelia.

Delegado do Evento

Mesmo a delegação é um conceito útil onde o manipulador de eventos é anexado a um elemento de nível superior em vez de vários elementos no DOM. Isso melhorará a eficiência da memória do aplicativo e deve ser usado sempre que possível.

Este é um exemplo simples de uso da delegação de eventos com a estrutura Aurelia. Nossa visão terá um botão comclick.delegate evento anexado.

app.html

<template>
   <button click.delegate = "myFunction()">CLICK ME</button>
</template>

Assim que o botão for clicado, myFunction() será chamado.

app.js

export class App {
   myFunction() {
      console.log('The function is triggered...');
   }
}

Obteremos a seguinte saída.

Gatilho de Evento

Existem alguns casos em que você não pode usar a delegação. Alguns eventos JavaScript não oferecem suporte à delegação; IOS oferece suporte para alguns elementos. Para descobrir quais eventos permitem delegação, você pode pesquisar por umbubblepropriedade de qualquer evento aqui . Nesses casos, você pode usartrigger() método.

A mesma funcionalidade do exemplo acima pode ser criada com click.trigger.

app.html

<template>
   <button click.trigger = "myFunction()">CLICK ME</button>
</template>

app.js

export class App {
   myFunction() {
      console.log('The function is triggered...');
   }
}