In this chapter, you will learn about Aurelia events.

Event Delegate

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

This is a 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 don’t support delegation; IOS supports it for some elements. To find out which events allow delegation, you can search for a bubble property of any event here. In these cases, you can use trigger() method.

The same functionality from the above example 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...'');
   }
}