# Events

Components event callbacks are configured using the events configuration attribute.  

## User Events

User events are those initiated by a user working with a component.  User events can have any name but the data passed into the user event callback will have the same format.

### Event Data

| Name      | Description                                                                                                                         |
| --------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| base      | Underlying component or plugin event that raised the WireBootstrap event                                                            |
| data      | Standard WireBootstrap [event data](https://docs.wirebootstrap.com/wirebootstrap/data-events/raising-events#structured-data-events) |
| component | The WireBootstrap component that raised the event                                                                                   |

```javascript
const select = new wire.bsSelect().render("#select", {
    ...
    events: {
        change: (config) => {
            ...
            // config.base
            // config.data
            // config.component
        }    
    }
});
```

## Life Cycle Events

### Ready

The `ready` event is called when the component is done initialing the first time.  This includes retrieving data from a data service if bound to a dataset as well as rendering the component in the DOM.

```javascript
const select = new wire.bsSelect().render("#select", {
    ...
    events: {
        ready: (config) => {
            ...
        }                
    }
});
```

### DataBind

The `databind` event is called each time the component gets new data.  If bound to static data such as an array of objects, this event will be called one time at the same time as the `ready` event.  If bound to a dataset, it will be called any time the component receives data updates from the dataset and has made the necessary changes to reflect them in its UI.

```javascript
const select = new wire.bsSelect().render("#select", {
    ...
    events: {       
        databind: (config) => {
            ...
        }            
    }
});
```

## Fail

The `fail` event is called when the component fails during one of the life cycle events.  This event replaces `ready` and `databind` passing in the exception. 

```javascript
const select = new wire.bsSelect().render("#select", {
    ...
    events: {
        fail: (ex) => {
            ...
        }                
    }
});
```

{% hint style="info" %}
Note, there is no need to handle the exception object with any type of UI message as this is handled by the component.
{% endhint %}

For more on component events, visit the [wire.ui.Component](https://docs.wirebootstrap.com/wirebootstrap/reference/wire.ui/wire.ui.component) reference page.