---
# System prepended metadata

title: Events
tags: [brew-js]

---

---
tags: brew-js
---

# Events

Most important part would be events, as user interface is event-driven. Other than the of-course DOM events, Brew.js also provides a wide range of additional events.

For example, with the [Login](#login) and [Router](#router) extensions:

```typescript
brew<Brew.WithLogin<{}> & Brew.WithRouter>((app) => {
    app.on('login', (e) => {
        brew.setVar({ isLoggedIn: true });
    });
    app.on('navigate', (e) => {
        brew.setVar({ currentSection: e.route.section })
    });
});
```

## Observing properties

Properties can also be observed and become an event source:

```typescript
brew<{ counter: number }>((app) => {
    app.watch('counter', (newValue) => {
        brew.setVar({ myProp: newValue });
    });
});
```

## Feedback from template

Retrospectively, app can also be notified when template variables are changed, either changed by `brew.setVar` from other events or triggered by `set-var` directives on the template itself:

```typescript
brew((app) => {
    app.on(document.body, 'statechange', (e) => {
        if ('counter' in e.newValues) {
            // do stuff when `counter` variable changed
            doStuffWhenCounterIncreased();
        }
    });
});
```

```htmlembedded
<body var="{ counter: 0 }">
    <!-- By clicking the button the `counter` variable is incremented
         and the app will call `doStuffWhenCounterIncreased`
         -->
    <button set-var="{ counter: [ counter + 1 ] }">
        Increase counter
    </button>
</body>
```

## Events

### `validate` event

Allow performing asynchronous form validation.
This is particularly useful when combining with the `validate` HTML directive.


### `reset` event

### `validation-failed` error
