Aurepa - Events

In this chapter, you will learn about Aurepa 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 apppcation memory efficiency and should be used whenever possible.

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

app.html

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

Once the button is cpcked, 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 functionapty from the above example can be created with cpck.trigger.

app.html

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

app.js

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