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.
There are 2 types of event handlers:
Note: While static event handlers are still supported for existing sites, we recommend using dynamic event handlers for new development and when updating existing code.
Dynamic event handlers are the recommended approach. They offer several advantages:
Example of a dynamic event handler:
1
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
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
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.
Note: While the Properties & Events panel is convenient, you can also add event handlers by writing directly in your page's code, using the element's context menu, or using the AI assistant tool. Choose the method that best suits your workflow and development environment.
To delete a dynamic event handler:
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:
After migration, your code updates from the old static format to the new dynamic format. For example:
Old format:
1
New format:
1
To delete a static event handler:
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.