The change in the state of an object is known as an Event. In fastn, there are various events which represents that some activity is performed by the user. A function reacts over these events and allow the execution. This process of reacting over the events is called Event Handling.

We can create our own function or use built-in function.

Here is the list of the events present in fastn

`on-click`

The on-click event can be used to call a function when the user clicks on the element.

Input

-- boolean $show: true

-- ftd.text: Click me!
$on-click$: $ftd.toggle($a = $show)

-- ftd.text: Hide and Seek
if: { show }

Lang:

ftd

Output

Click me!

Hide and Seek

`on-click-outside`

The on-click-outside event can be used to call a function when the user clicked outside the element

Input

-- boolean $show: false

-- ftd.text: Click me and click outside then
$on-click$: $ftd.set-bool($a = $show, v = true)
$on-click-outside$: $ftd.set-bool($a = $show, v = false)

-- ftd.text: Hide and Seek
if: { show }

Lang:

ftd

Output

Click me and click outside then

`on-mouse-enter`

The on-mouse-enter event can be used to call a function when the mouse cursor enters the element.

Input

-- boolean $show: true

-- ftd.text: Enter mouse cursor over me
$on-mouse-enter$: $ftd.toggle($a = $show)

-- ftd.text: Hide and Seek
if: { show }

Lang:

ftd

Output

Enter mouse cursor over me

Hide and Seek

`on-mouse-leave`

The on-mouse-leave event can be used to call a function when the mouse cursor leaves the element.

Input

-- boolean $show: true

-- ftd.text: Enter mouse cursor over me
$on-mouse-enter$: $ftd.set-bool($a = $show, v = true)
$on-mouse-leave$: $ftd.set-bool($a = $show, v = false)

-- ftd.text: Hide and Seek
if: { show }

Lang:

ftd

Output

Enter mouse cursor over me

`on-input`

The on-input event can be used to call a function when the user inputs something into the element.

In the below example we have also used a special variable VALUE which is available for ftd.text-input component. This gives the value typed by user on this element.

Input

-- string $txt: Fifthtry

-- ftd.text: $txt

-- ftd.text-input:
placeholder: Type any text ...
type: text
width.fixed.px: 400
border-width.px: 2
$on-input$: $ftd.set-string($a = $txt, v = $VALUE)

Lang:

ftd

Output

Fifthtry

`on-change`

The on-change event can be used to call a function when the value of the element changes and focus is moved out of the element.

In the below example we have also used a special variable VALUE which is available for ftd.text-input component. This gives the value typed by user on this element.

Input

-- string $txt: Fifthtry

-- ftd.text: $txt

-- ftd.text-input:
placeholder: Type any text ...
type: text
width.fixed.px: 400
border-width.px: 2
$on-change$: $ftd.set-string($a = $txt, v = $VALUE)

Lang:

ftd

Output

Fifthtry

`on-blur`

The on-blur event can be used to call a function when an element loses focus.

`on-focus`

The on-focus event can be used to call a function when an element receives focus.

Input

-- boolean $flag: false

-- ftd.text-input:
placeholder: Type any text ...
type: text
width.fixed.px: 400
border-width.px: 2
background.solid if { flag }: $inherited.colors.background.step-1
background.solid: $inherited.colors.background.step-2
$on-focus$: $ftd.set-bool($a = $flag, v = true)
$on-blur$: $ftd.set-bool($a = $flag, v = false)

Lang:

ftd

Output

`on-global-key[<hyphen-seperated-keys>]`

The on-global-key event can be used to call a function when gives keys are pressed simultaneously. For instance, on-global-key[ctrl-a-s] triggers the event when keys ctrl, a and s are pressed simultaneously.

Input

-- boolean $flag: true

-- ftd.text: Press ctrl, a and s simultaneously
color: purple
color if { flag }: green
$on-global-key[ctrl-a-s]$: $ftd.toggle($a = $flag)

Lang:

ftd

Output

Press ctrl, a and s simultaneously

`on-global-key-seq[<hyphen-seperated-keys>]`

The on-global-key event can be used to call a function when gives keys are pressed sequentially i.e. one after another. For instance, on-global-key-seq[ctrl-ctrl-ctrl] triggers the event when keys ctrl, ctrl and ctrl are pressed sequentially.

Input

-- boolean $flag: true

-- ftd.text: Press ctrl, ctrl and ctrl sequentially
color: purple
color if { flag }: green
$on-global-key-seq[ctrl-ctrl-ctrl]$: $ftd.toggle($a = $flag)

Lang:

ftd

Output

Press ctrl, ctrl and ctrl simultaneously