Aurelia - Events

In this chapter we will show you Aurelia events.

Event Delegate

Even delegation is useful concept where event handler is attached to one top level element instead of multiple elements on the DOM. This will improve application memory efficiency and should be used whenever possible.

This is simple example of using event delegation with Aurelia framework. Our view will have a button with click.delegate event attached.

app.html

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

Once the button is clicked, myFunction() will be called.

app.js

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

We will get the following output.

Event Trigger

There are some cases when you can't use delegation. Some JavaScript events doesn't support delegation, IOS supports it for some elements. To find out which events allows delegation you can search for a bubble property of any event here. In these cases you can use trigger() method.
The same functionality from example above can be created with 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...');
   }
}