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.
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.
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.