> 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: Event Handler Data Types

## Article: Event Handler Data Types

## Article Link: https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/event-handler-data-types.md

## Article Content:

# Event Handler Data Types
Event handler data types allow Wix users to attach standard DOM event handlers to their component. These types automatically wire up event handling in the editor and at runtime.


## Available event handler types

All event handler types require no additional configuration. Just specify the `dataType` and optionally a `displayName`.

### onClick

Standard [onClick handler](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event) for click interactions.

#### Example

A click handler for button interactions:

```typescript
editorElement: {
  data: {
    onClick: {
      dataType: "onClick",
      displayName: "On Click",
    },
  },
}
```
### onChange

Standard input event [onChange](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) for text inputs.

#### Example

An input change handler for a text field:

```typescript
editorElement: {
  data: {
    onChange: {
      dataType: "onChange",
      displayName: "On Change",
    },
  },
}
```
### onKeyPress

Standard [onKeyPress handler](https://developer.mozilla.org/en-US/docs/Web/API/Element/keypress_event) fired when a key is pressed.

#### Example

A key press handler for keyboard input:

```typescript
editorElement: {
  data: {
    onKeyPress: {
      dataType: "onKeyPress",
      displayName: "On Key Press",
    },
  },
}
```

### onKeyUp

Standard [onKeyUp handler](https://developer.mozilla.org/en-US/docs/Web/API/Element/keyup_event) fired when a key is released.

#### Example

A key up handler for keyboard events:

```typescript
editorElement: {
  data: {
    onKeyUp: {
      dataType: "onKeyUp",
      displayName: "On Key Up",
    },
  },
}
```

### onKeyDown

Standard [onKeyDown handler](https://developer.mozilla.org/en-US/docs/Web/API/Element/keydown_event) fired when a key is pressed down.

#### Example

A key down handler for keyboard navigation:

```typescript
editorElement: {
  data: {
    onKeyDown: {
      dataType: "onKeyDown",
      displayName: "On Key Down",
    },
  },
}
```

### onFocus

Standard [onFocus handler](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event) fired when an element receives focus.

#### Example

A focus handler for form validation:

```typescript
editorElement: {
  data: {
    onFocus: {
      dataType: "onFocus",
      displayName: "On Focus",
    },
  },
}
```

### onSubmit

Standard [onSubmit handler](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event) for form submissions.

#### Example

A submit handler for form processing:

```typescript
editorElement: {
  data: {
    onSubmit: {
      dataType: "onSubmit",
      displayName: "On Submit",
    },
  },
}
```

### function

A custom function that can be passed in if there is a matching one defined.

#### Example

A custom function handler:

```typescript
editorElement: {
  data: {
    onCustomAction: {
      dataType: "function",
      displayName: "On Custom Action",
    },
  },
}
```