Skip to main content
Version: v11.4.3

Page Events

Events provide a way for you to define the actions that take place when something occurs in your application. There are many events that occur within a WaveMaker application. The most common events are user interface events, such as when a user clicks a button. Events are also triggered when an editor's value changes, and even when a Variable gets new data from the server. You have several options for specifying what will happen when a button is clicked.

Mouse Events On-Click Properties

No Event

Take no action.


You can write your own event handler in JavaScript, providing unlimited flexibility to define the resulting action.

Stop Propagation

If applied for an event it stops event propagating to its parent. Ex: - Button is present inside a container. Both 'Container' and 'Button' have click events and you don't want to propagate click of the button to its parent ie. to trigger container click. You can add 'Stop Propagation' after the click of 'Button'. With 'Stop Propagation' only 'Button' click is triggered. Without 'Stop Propagation' both click events will be triggered. One exception is for 'List' widget as click on any widget inside list will trigger first the click of 'List' widget as it is being done in capturing stage.

New Variable

For example, a user clicks a Search button. A Service is invoked whenever the button is pressed, causing the service to be executed and the data of the corresponding Variable is updated. Or the user clicks a Save button, and the corresponding Variable you select for your event will automatically write its current source data to the database.

New Action

For example, a help dialog automatically displays when a help button is clicked. Or the user clicks a Next Page button, and the _Navigation Action_you select for your event loads a new page.

Event Categorization

The events are categorized as follows:

Common eventsTriggered by multiple actions. These include Change, Focus, Blur, and more.
Mouse EventsCapture the mouse activity on your application. These include Click, Double Click, Mouse Enter, Mouse Leave, and more.
Touch EventsGets triggered when running the app on a mobile or tablet or any other smart device. These events include: Swipe Up, Swipe Down, Swipe Left, Swipe Right, Pinch In, Pinch Out, and more.
KeyBoard EventsCapture the key strokes. These include Enter Key Press, and more.
CallBack EventsWidget-specific special events. For example, Record Delete, on Select, on Deselect for a grid widget; Before Records Update for Data Navigator.

Multiple Actions on an Event

WaveMaker supports multi-action event handling. This means you can assign a series of actions that can be triggered by a single event. Click on the "+" next to the event name to add more actions. When you use a series of variables to trigger on an event ensure that you handle eventualities like one callback was a success and other failed.

We have seen how Page Layouts, Navigation, and Events help in defining the flow of the app. Check out these use cases to further your experience.

See Also

Page Navigation
Prevent Leaving Page with Unsaved Changes