Aurelia Events

On the previous tutorial, we discuss Aurelia Routing. On this tutorial we will tackle Aurelia Events.

There is a useful concept where event handler will be added into a top level element rather than multiple elements on the DOM. It will enhance the efficiency of the application’s memory and can be used whenever available.

We’ll create a simple example that uses event delegation with Aurelia framework. The view will have an event button named click delegate.

app.html

<template>

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

A button is created with the name CLICK ME.

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

myFunction() is called when the button is clicked.

Some JavaScript events does not support delegation, so there will be cases when delegation cannot be used but IOS supports some elements. To learn which events allows delegation, search the bubble property in any of the events by going to https://developer.mozilla.org/en-US/. For these instances, use the trigger() method.

Based from the example above, same functionality 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…’);
  }
}

On the next tutorial, we will discuss Aurelia Converters.

Subscribe Now and Upgrade Your Skills Today!
Sign up now and have the latest tech tutorials delivered straight to your mailbox.

PLUS: Get exclusive member-only discounts (up to 80% OFF!!) on our top tech courses in Udemy!
We hate spam. Your email address will not be sold or shared with anyone else.