Add an Event Handler

You can add dynamic event handlers to elements on your site. To add an event handler to an element, you can either:

• Write the code for the event handler directly in your page code.
• Use the Properties & Events panel in the Wix editor to generate the event handler for you.

Add an event handler directly in your code

Write the event handler in your page code, either outside or inside the page’s onReady() function. Access your page code files based on your setup:

• Editor: Select the Page Code tab in the code panel.
• Local IDE when using Git integration: Locate your site repo's src folder.
• Wix IDE (Wix Studio): Use the src folder.

Sample event handler:

You can add or modify event handlers dynamically in your code as needed, for example, $w('#myElement').myHandlerFunction().

Add an event handler using the Property & Events panel

To generate an event handler in the editor using the Properties & Events panel:

1. In the editor, select the element you want to add an event handler to.
2. In the Properties & Events panel, click the event you want to handle. For example, onClick() or onMouseIn().
3. The page code will display a new event handler in the code editor:

4. Inside the body of the event handler, add the code you want to execute when the event occurs.

   For example:

   Copy

   Note:

   When you add an event handler using the Properties & Events panel, the event handler code is placed outside the onReady() function. You can then move the generated code snippet to any location.

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

See also

• About Event Handlers in Wix.
• About the Properties & Events Panel.