> 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: About Event Handlers

## Article: About Event Handlers

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

## Article Content:

# About Event Handlers

Frontend event handlers in Wix work differently than in vanilla JavaScript. Normally, you would use `addEventListener()` to add event handlers, selecting DOM elements with methods like `getElementById()` or `querySelector()`.

For example, you might write:

```js
document.getElementById("myButton").addEventListener("click", function () {
  console.log("Button clicked!");
});
```

In Wix, however, you don't access the DOM directly. Instead, you use the [$w API](https://dev.wix.com/docs/velo/velo-only-apis/$w/introduction.md) to interact with elements in the Wix Editor and add event handlers, like this:

```js
$w("#myButton").onClick(() => {
  console.log("Button clicked!");
});
```

## Using SDK code in event handlers

Although you need to create event handlers using the Velo API, you can use SDK code in the event handler body.

For example:

```js
import { items } from "@wix/data";

// Add an event handler using Velo
$w("#submitButton").onClick(async () => {
  // Use SDK code inside the event handler
  const result = await items.insert("listings", {
    title: $w("#titleInput").value,
    price: Number($w("#priceInput").value),
    bedrooms: Number($w("#bedroomsInput").value),
  });
});
```

## Supported IDEs

You can use event handlers in the following IDEs:

- The [editor](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/developer-environments/ides/code-editor/about-the-code-editor.md) (Wix Studio and Wix Editor)
- The [Wix IDE](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/developer-environments/ides/wix-ide/about-the-wix-ide.md) (Wix Studio)
- Your [local IDE](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/developer-environments/ides/git-integration/about-git-integration-with-wix-cli.md) (Wix Studio and Wix Editor)

<blockquote class="important">
  <strong>Important:</strong>
  
Wix's static event handlers have been deprecated. While [static event handlers](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/build-a-custom-frontend/event-handlers/about-static-event-handlers.md) are still supported for existing sites, we recommend using dynamic event handlers for new development and when updating existing code. 
</blockquote>

## See also

- [Add an Event Handler](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/build-a-custom-frontend/event-handlers/add-an-event-handler.md)
- [About Code Placement](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/code-with-java-script/about-code-placement.md)