--- 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