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.
Orient yourself in Properties panel
Section titled “Orient yourself in Properties panel”Start with the wider context in the Properties panel so the next control makes sense in the full workflow. In the next step, you will focus on Dynamic Events menu and see how it fits into this area.
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. This step matters because Actions Picker (Click) is part of Selection Panels Properties Click, and understanding that context makes the next action easier to repeat in your own project.
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)”This list is what runs when the event fires. Reorder actions to change behavior.
Close Actions Picker
Section titled “Close Actions Picker”Close the Actions Picker to return to Properties. This step matters because Close Actions Picker is part of Popup Actionspickup Button Cancel, and understanding that context makes the next action easier to repeat in your own project.
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.