Aurelia - 事件

在本章中，您将了解 Aurelia 事件。

事件委托

事件委托是一个有用的概念，其中事件处理程序附加到一个顶级元素，而不是 DOM 上的多个元素。这将提高应用程序的内存效率，应尽可能使用。

这是一个使用 Aurelia 框架进行事件委托的简单示例。我们的视图将有一个附加了 click.delegate 事件的按钮。

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...');
   }
}

我们将得到以下输出。

事件触发器

在某些情况下您无法使用委托。某些 JavaScript 事件不支持委托；IOS 对某些元素支持委托。要找出哪些事件允许委托，您可以搜索任何事件的 此处 的 bubble 属性。在这些情况下，您可以使用 trigger() 方法。

可以使用 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...');
   }
}