# 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](/wirebootstrap/data-events/raising-events.md#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](/wirebootstrap/reference/wire.ui/wire.ui.component.md) reference page.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.wirebootstrap.com/wirebootstrap/working-with-components/configuration/events.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.