> For the complete documentation index, see [llms.txt](https://docs.wirebootstrap.com/wirebootstrap/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wirebootstrap.com/wirebootstrap/working-with-components/building-a-component/data-events.md).

# Data Events

The code for the following examples are available in the [building-a-component](/wirebootstrap/working-with-components/building-a-component.md) project inside the `\data-events` folder.

In the previous example, [Hello World](/wirebootstrap/working-with-components/building-a-component/hello-world.md), the binding was *static*.  This means the information displayed inside the component does not change after its initial binding.  

Often times its desired that a component react to something a user does in another component on a page.  In WireBootstrap, [data events](/wirebootstrap/dataevents.md) can be used to listen for changes to data that may be of interest to a component.  Using data events, component data bindings can be *dynamic* where the data displayed inside a component changes based on other changes on a page.

In the example below, the component sets up a data event listener for an event called `my-component-change` and then rebinds to the data sent in the event when its fired on the page.

```javascript
...

// Listen for data event and re-bind
wire.data.DataEventManager.event("my-component-change").when((cfg) => {
    document.getElementById(el).innerHTML = cfg.data.value;
});

...
```

```javascript
// Fire data event passing a new 'value'
new wire.data.DataEvent()
  .event("my-component-change")
  .data({ value: "Hello Data Event" })
  .raise();

```