> 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/articles/coding-with-velo/frontend-code/add-an-event-handler.md

## Article Content:

# Add an Event Handler

You can add [dynamic event handlers](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/about-event-handlers-in-wix.md) 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()`](https://dev.wix.com/docs/velo/api-reference/$w/on-ready.md) 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](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/git-integration-wix-cli/about-git-integration-wix-cli/.md):** Locate your site repo's `src` folder.
+ **[Wix IDE](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/wix-ide/wix-studio-about-the-wix-ide.md) (Wix Studio):** Use the `src` folder.

Sample event handler:

```js
$w('#myButton').onClick((event) => { 
  console.log('Button was clicked!'); 
$w('#myText').text = 'Hello, World!';
 });
```

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: 

```js
$w('#myButton').onClick((event) => {
});
```

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

    For example:

    ```js
    $w('#myButton').onClick((event) => { 
      console.log('Button was clicked!');
      $w('#myText').text = 'Hello, World!'; 
    });
    ```

    > **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](https://dev.wix.com/docs/velo/api-reference/$w/introduction.md). 

## See also
+ [About Event Handlers in Wix](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/about-event-handlers-in-wix.md).
+ [About the Properties & Events Panel](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/properties-events-panel/about-the-properties-events-panel.md).