> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Add an Event Handler

## Article: Add an Event Handler

## Article Link: https://dev.wix.com/docs/develop-websites-sdk/code-your-site/build-a-custom-frontend/event-handlers/add-an-event-handler.md

## Article Content:

# Add an Event Handler

You can add [dynamic event handlers](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/build-a-custom-frontend/event-handlers/about-event-handlers.md) to elements on a site to respond to visitor interactions like clicks, mouse movements, or form submissions.

To add an event handler to an element, do the following either inside or outside of the page's [`onReady()`](https://dev.wix.com/docs/velo/velo-only-apis/$w/on-ready.md) handler:

1. Use the `$w` API to select the element you want to add an event handler to.
1. Use the appropriate event method, such as `onClick()`, `onMouseIn()`, or `onChange()`, to define the event handler.
1. Write the code you want to execute when the event occurs inside the event handler method body.

For example, the following code adds a click event handler to a button that changes the text of a text element when clicked:

```js
$w("#myButton").onClick((event) => {
  $w("#myText").text = "Hello, World!";
});
```

> **Note:** You can also add event handlers using these alternative methods:
>
> - Use the Properties & Events panel in the Wix Editor to generate the event handler registration code that you add the implementation to.
> - Use the [AI Code Assistant](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/developer-environments/ai-assistants/about-ai-assistants.md#ai-code-assistant-in-the-wix-studio-code-panel) in Wix Studio to generate custom event handler code.

## See also

- [About Event Handlers](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/build-a-custom-frontend/event-handlers/about-event-handlers.md)
- [About the Properties & Events Panel](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/developer-environments/ides/code-editor/about-the-properties-events-panel.md)