---
updatedAt: 2025-06-10T21:39:06.000Z
agentTools:
  siteIndex: https://docs.recurly.com/llms.txt
  projectIndex: https://docs.recurly.com/recurly-subscriptions/v1.2.2/llms.txt
---

# Events

How to subscribe to and detach Recurly.js element events with `on` / `off`, including a working example for the `change` event.

Recurly.js Elements, as well as other Recurly.js objects, act as **event emitters**.

Register listeners with `.on(event, handler)` and remove them with `.off(event, handler)` to react to card-entry changes, focus, validation states, and more.

# Key details

```javascript
// 1. Create your Elements group and individual element
const elements = recurly.Elements();
const card = elements.CardElement();

// 2. Attach the element to the DOM
card.attach('#card-container');

// 3. Add an event listener
function changeHandler (state) {
  // `state` contains validity, card brand, last4, etc.
  console.log(state);
}
card.on('change', changeHandler);

// 4. Remove the listener when it's no longer needed
card.off('change', changeHandler);
```

| Common event | Fired when…                               | Payload highlights                          |
| ------------ | ----------------------------------------- | ------------------------------------------- |
| `change`     | Field value changes or validity updates   | `state.valid`, `state.brand`, `state.empty` |
| `focus`      | Element gains focus                       | —                                           |
| `blur`       | Element loses focus                       | —                                           |
| `ready`      | Element is fully rendered and interactive | —                                           |

> **Tip**\
> Keep a reference to the exact handler you passed to `.on()`; you must supply the same function reference to `.off()` to successfully detach the listener.

# Sibling pages

* [Overview](https://docs.recurly.com/recurly-subscriptions/v1.2.2/docs/overview-recurlyjs-4350.md)
* [Getting started](https://docs.recurly.com/recurly-subscriptions/v1.2.2/docs/getting-started.md)
* [Styling elements](https://docs.recurly.com/recurly-subscriptions/v1.2.2/docs/styling-elements.md)
* [Getting a token](https://docs.recurly.com/recurly-subscriptions/v1.2.2/docs/getting-a-token.md)
* [Using a token](https://docs.recurly.com/recurly-subscriptions/v1.2.2/docs/using-a-token.md)
* [Elements](https://docs.recurly.com/recurly-subscriptions/v1.2.2/docs/elements.md)
* [Apple Pay](https://docs.recurly.com/recurly-subscriptions/v1.2.2/docs/apple-pay.md)
* [Google Pay ™](https://docs.recurly.com/recurly-subscriptions/v1.2.2/docs/google-pay-tm.md)
* [Bank accounts: US, IBAN, BACS, BECS](https://docs.recurly.com/recurly-subscriptions/v1.2.2/docs/bank-accounts-us-iban-bacs-becs.md)
* [Boleto, iDEAL, Sofort, and CashApp](https://docs.recurly.com/recurly-subscriptions/v1.2.2/docs/boleto-ideal-sofort-and-cashapp.md)
* [PayPal](https://docs.recurly.com/recurly-subscriptions/v1.2.2/docs/paypal.md)
* [Venmo](https://docs.recurly.com/recurly-subscriptions/v1.2.2/docs/venmo.md)
* [Amazon Pay V2](https://docs.recurly.com/recurly-subscriptions/v1.2.2/docs/amazon-pay-v2.md)
* [Pricing](https://docs.recurly.com/recurly-subscriptions/v1.2.2/docs/pricing.md)
* [3D Secure](https://docs.recurly.com/recurly-subscriptions/v1.2.2/docs/3d-secure.md)
* [Fraud](https://docs.recurly.com/recurly-subscriptions/v1.2.2/docs/fraud.md)
* [Validation](https://docs.recurly.com/recurly-subscriptions/v1.2.2/docs/validation.md)
* [Errors](https://docs.recurly.com/recurly-subscriptions/v1.2.2/docs/errors.md)
* [Examples](https://docs.recurly.com/recurly-subscriptions/v1.2.2/docs/examples.md)
* [React & TypeScript support](https://docs.recurly.com/recurly-subscriptions/v1.2.2/docs/react-typescript-support.md)
* [Upgrading](https://docs.recurly.com/recurly-subscriptions/v1.2.2/docs/upgrading.md)
* [Support](https://docs.recurly.com/recurly-subscriptions/v1.2.2/docs/support.md)