On-Event

On-Event Actions allow you to configure response logic for an event that occurred on the target element.

This response logic is an After-Action that get's executed after the event.

NOTE

On-Event Actions, and Event Actions are not the same.

On-Event Actions are tied to the target element, while Event Actions are based on events that happen in the browser events

Types of On Event Actions

Event	Description
Click	Acts when the target element is clicked
Submit	Performs an action when the target form is submitted
Change	Performs an action when the target input's value changes. Note that this event won't be triggered on every keystroke. Instead, the change event will fire once the input loses focus.
Input	Performs an action on every keystroke within the target input.
Blur	Fires once the target input loses focus
Focus	Acts when the target input gets focus
Keydown	Performs an action when a key is pressed. This is often paired with conditional logic, to fire only on a specific key like the return key.
Custom*	You can type in any DOM Event or a custom event that you created. The action will be performed as soon as the event occurs on the target element.

Whenever one of these events occur, you can run any after-action.

Prevent default

The prevent default checkbox allows you to prevent the default action that would happen when the user interacts with an element.

For example, when a form is being submitted, the data gets sent to Webflow. By ticking the Prevent default checkbox, you're preventing that from happening.

Instead, you can run your logic such as submitting a request or updating a variable.

The prevent default action is mainly used on forms, but you can prevent other events too.

Here are a few of the most common use cases for Prevent default:

1. Clicking Links: Prevent a link from navigating to a new page when clicked.
2. Form Submission: Stop a form from submitting when a submit button is clicked.
3. Keyboard Shortcuts: Block default browser actions triggered by keyboard shortcuts.
4. Right-Click Menu: Disable the context menu that appears when right-clicking.
5. Copy/Paste: Prevent copying and pasting in certain input fields or content.

You can read more about preventing default in the MDN docs.

Reset form

This option is available only for the submit event.

Ticking the Reset form checkbox will set all form input values to their initial value when the form is submitted.

In other words, you're resetting the form on submit.

A good example would be message input in a chat app. When you send your message, you want the input to be empty again.