# element.on()

> Listens to an element event.

Source: https://docs.tryyoursize.com/reference/web/element-on/

*Method* · `@tryyoursize/sdk`

Listens to an element event. A handler that throws never breaks the SDK or the other handlers.

```ts
on<K extends keyof ElementEvents>(event: K, handler: (e: ElementEvents[K]) => void): void;
```

## Parameters

- **`event`** (`keyof ElementEvents`, required): `"ready"`, `"size"`, `"open"`, `"close"`, `"loaderror"` or `"recommendation"`. See the event pages.
- **`handler`** (`(e: ElementEvents[K]) => void`, required): Called with the event payload.

## Example

**JavaScript**

```js
guide.on("recommendation", (r) => r.status === "ready" && preselect(r.size));
guide.on("size", ({ size }) => preselect(size));          // "Use this size" in the window
guide.on("loaderror", ({ error }) => console.warn(error.code));
```

**React**

```tsx
<SizeGuide
  product="SKU-123"
  onRecommendation={(r) => r.status === "ready" && preselect(r.size)}
  onSize={({ size }) => preselect(size)}
  onLoadError={({ error }) => console.warn(error.code)}
/>
```

**HTML**

```html
const el = document.querySelector("tys-size-guide");
el.addEventListener("tys:recommendation", (e) => e.detail.status === "ready" && preselect(e.detail.size));
el.addEventListener("tys:size", (e) => preselect(e.detail.size));
```