Event Handling #

Event handling refers to the process of capturing and responding to user interactions with a web page or application. These interactions can include mouse clicks, keyboard inputs, form submissions, and other types of user input.

Leaf UI provides a simple API for handling events on DOM elements. The API is similar to the standard DOM API, but uses a ui-on directive or it's shorthand @ to handle events.

Event Handling with ui-on #

The ui-on directive is used to handle events on DOM elements. It takes an event name and a callback function as arguments. The callback function is called when the event is triggered.

<button ui-on:click="handleClick">Click Me</button>

<?php

use Leaf\UI\Component;

class MyComponent extends Component
{
  public $key = 'MyComponent';

  public function handleClick()
  {
      echo "You clicked me!";
  }

  ...

The ui-on directive can be used to handle any event that is triggered on the element. For example, the following code handles the mouseover event:

<button ui-on:mouseover="handleMouseOver">Hover Me</button>

Using the ui-on directive everywhere can be cumbersome. Leaf UI provides a shorthand for the ui-on directive. The shorthand is @ and can be used to handle events on DOM elements.

Event Handling with @ #

The @ shorthand can be used to handle events on DOM elements. It takes an event name and a callback function as arguments. The callback function is called when the event is triggered.

<button @click="handleClick">Click Me</button>

<?php

use Leaf\UI\Component;

class MyComponent extends Component
{
  public $key = 'MyComponent';

  public function handleClick()
  {
      echo "You clicked me!";
  }

  ...