Add
Use Dynamic Events ( + ) to add event handlers to the selected element.
Dynamic Events
Dynamic Events overview: preview the ( + ) menu, open the Actions Picker for an existing event, and understand common modifiers.
Introduction
Section titled “Introduction”Dynamic Events connect user interactions (click, submit, keyup, …) to actions. You configure them visually in Properties.
What you’ll learn
Section titled “What you’ll learn”You’ll preview the ( + ) menu (categories → submenus), then inspect an existing Click event and open its Actions Picker.
Pick actions
Use the Actions Picker to build an action list safely.
Control behavior
Use modifiers like prevent/stop/once and key/button modifiers.
Select an element
Add an event
Pick actions + configure modifiers
Open the tour page
Section titled “Open the tour page”This tour opens a small counter page so you can inspect an event/action flow.
Add a Dynamic Event
Section titled “Add a Dynamic Event”Dynamic Events are added from Properties via ( + ). Available events depend on the selected element.
Selected element
Section titled “Selected element”A real element with no existing Dynamic Events is auto-selected so you can see the full ( + ) menu.
Dynamic Events menu
Section titled “Dynamic Events menu”This ( + ) menu lists the available event handlers for the selected element, grouped into categories and, in some cases, submenus.
Inspect an existing Click event
Section titled “Inspect an existing Click event”Now the tour selects a button that already has a dmx-on:click event, so you can inspect its Actions Picker without adding anything new.
Actions Picker
Section titled “Actions Picker”Events run an ordered list of actions. The Actions Picker builds and edits that list.
Actions Picker (Click)
Section titled “Actions Picker (Click)”The Actions Picker shows what runs on Click so you can inspect and edit the action list.
Actions Picker popup
Section titled “Actions Picker popup”Pick actions from the left tree, then configure action inputs on the right.
Selected actions (order matters)
Section titled “Selected actions (order matters)”Select the existing action so you can read the real event flow instead of a generic picker example. The next steps use that selection to explain what already happens on this event and where you would refine or extend it.
Close Actions Picker
Section titled “Close Actions Picker”Close the Actions Picker to return to Properties.
Modifiers (optional)
Section titled “Modifiers (optional)”Modifiers let you control default behavior and propagation without writing manual code.
Review modifiers
Section titled “Review modifiers”Modifiers change behavior (prevent default, stop propagation, capture, once) and can add key/button conditions. The tour opens a dropdown so the options are visible while explaining.
note: Modifiers are a quick way to express common patterns (prevent default, run once, only on Enter, etc.).
Common modifier patterns
Section titled “Common modifier patterns”Examples: use prevent + stop for links/buttons, once for one-time actions, and key modifiers to run only on Enter (for key events).
Conclusion
Section titled “Conclusion”Next: learn how events and dynamic attributes work together.
Pick your next tour
Section titled “Pick your next tour”Continue with related tours.