Reacting to User Actions Using Events

An event is something that can happen to an element, usually as the result of a user action. For example, onClick is the event that occurs when a user clicks an element, while onMouseIn is the event that occurs when a user hovers over an element with their mouse pointer.

Events can happen to any element on your page, including the page itself, the header and footer, and any datasets you may have on your page.

If you want your site to do something, or react, when an event occurs to an element, you add an event handler to it. An event handler is a function that contains the code you want to run when the event occurs. Adding an event handler to an element wires the function to the element.

Your site watches elements to see if events happen to them. If an event happens that has an event handler, the code in the event handler function will run.

Types of event handlers

There are 2 types of event handlers:

1. Dynamic event handlers (recommended)
2. Static event handlers (legacy)

Dynamic event handlers

Dynamic event handlers are the recommended approach. They offer several advantages:

• Consistent with the best practices.
• Can be added and modified directly in your code.
• Allow multiple handlers for the same event.
• Provide more flexibility.

Example of a dynamic event handler:

1

Static event handlers

Static event handlers are a legacy approach. While still supported for existing sites, they are not recommended for new development.

Example of a static event handler:

1

Add a dynamic event handler to an element

You can write dynamic event handlers directly into your page's code or you can add one using the Properties & Events panel that will add the event handler to your code for you:

1. In the Editor, select the element you want to add an event handler to.
2. In the Properties & Events panel, locate the "Event Handlers" section.
3. Click the event you want to handle (e.g., "onClick" for a button click event).
4. The page code will display a new event handler at the bottom. For example:

1

5. Add the code you want to execute when the event occurs. For example:

1

This code logs a message to the console and changes the text of an element with the ID 'myText' when the button is clicked. You can move the generated code snippet to a location that fits your code organization.

For a complete list of supported dynamic event handlers for each element type, see the Wix API reference.

Delete a dynamic event handler

To delete a dynamic event handler:

1. Open your page code.
2. Locate the event handler code.
3. Delete the entire event handler function.

Migrate from static to dynamic event handlers

While static event handlers are still supported for existing sites, we recommend using dynamic event handlers going forward. To migrate a static event handler to a dynamic one:

1. Open the Properties & Events panel for the element with the static event handler.
2. In the Event Handlers section, locate the event you want to migrate.
3. Click the yellow lightning bolt icon next to the event handler name.
4. Click the "Migrate [eventName] event" link that appears.

After migration, your code updates from the old static format to the new dynamic format. For example:

Old format:

1

New format:

1

Delete a static event handler

To delete a static event handler:

1. Select the element.
2. In the Properties & Events panel for that event, click the delete icon ().

Deleting an event handler from your element removes, or breaks, the wiring between the element and its event handler function. The code itself is not removed from your page, but your code for the event will no longer run if the event occurs to your element.