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](/functions/) or use [`built-in function`](/built-in-functions/). 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[]`

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[]`

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

Support `fastn`!

Enjoying `fastn`? Please consider giving us a star ⭐️ on [GitHub](https://github.com/fastn-stack/fastn) to show your support!

[⭐️](https://github.com/fastn-stack/fastn)

Getting Help

Have a question or need help? Visit our [GitHub Q&A discussion](https://github.com/fastn-stack/fastn/discussions/categories/q-a) to get answers and subscribe to it to stay tuned. Join our [Discord](https://discord.gg/a7eBUeutWD) channel and share your thoughts, suggestion, question etc. Connect with our [community](/community/)!

[💻️](/community/)

Found an issue?

If you find some issue, please visit our [GitHub issues](https://github.com/fastn-stack/fastn/issues) to tell us about it.

Quick links:

- [Install `fastn`](install/) - [Create `fastn` package](create-fastn-package/) - [Expander Crash Course](expander/) - [Syntax Highlighting in Sublime Text](/sublime/)

Join us

We welcome you to join our [Discord](https://discord.gg/a7eBUeutWD) community today. We are trying to create the language for human beings and we do not believe it would be possible without your support. We would love to hear from you.