# Events and observables

In this part of the crash course, you will learn how events and observable properties make the editor reactive and use them to keep the toolbar button in sync with the command.

<a id="reactivity">

## Reactivity

In the previous chapter of this tutorial, we wrote the following code to bind selected properties between the button and command objects:

```js
button.bind( 'isOn', 'isEnabled' ).to( command, 'value', 'isEnabled' );
```

This line allowed us to make the button reactive and reflect the state of the command. For example, if the command is not allowed to run, the corresponding button should not be clickable.

The reactivity described above is enabled by the [observables](../../deep-dive/observables.md) used in the CKEditor framework. Observables are objects that fire an event when their properties change. These changes can be observed and acted upon, which is exactly what we did with the `highlight` button.

Under the hood, observables use an even more powerful [event system](../../deep-dive/event-system.md) similar to the one in the DOM.

<a id="observables">

## Observables

Let’s analyze the code we wrote to create the reactive button.

<a id="creating-an-observable">

### Creating an observable

Many classes in the editor are already observables. This includes the [`Editor`](../../../api/module_core_editor_editor-Editor.md) class, the [`Command`](../../../api/module_core_command-Command.md) class, all UI elements that extend the [`View`](../../../api/module_ui_view-View.md) class and many more.

Since the `ButtonView` class is already an observable, we did not have to do anything other than create a new instance.

```js
const button = new ButtonView( locale );
```

Then, we called the `.set()` method to update a few button properties.

```js
button.set( {
	label: t( 'Highlight' ),
	withText: true,
	tooltip: true,
	isToggleable: true
} );
```

If you want to make a custom class an observable, see the [Observables](../../deep-dive/observables.md) guide.

<a id="reacting-to-user-input">

### Reacting to user input

Next, we registered a callback that will be called whenever the `execute` event (bound to the `click` event in the DOM) is fired:

```js
button.on( 'execute', () => {
	editor.execute( 'highlight' );
	editor.editing.view.focus();
} );
```

Clicking the button sets the focus on that button, making it impossible for the user to continue typing without clicking the editing view. The `editor.editing.view.focus()` line returns the focus to the editing view, allowing the user to continue typing without interruption.

To learn more about focus, see the [Focus tracking](../../deep-dive/ui/focus-tracking.md) document.

<a id="binding-properties">

### Binding properties

Finally, because the button and the command are both observables, we can bind selected properties between them:

```js
button.bind( 'isOn', 'isEnabled' ).to( command, 'value', 'isEnabled' );
```

The above line will attach listeners that listen for changes of the `value` and `isEnabled` properties of the command, and update the `isOn` and`isEnabled` button properties accordingly.

This is what the code would look like if you used the event system directly, without using the `bind(...).to(...)` abstraction provided by the observables:

```js
command.on( 'change:value', ( event, propName, newValue, oldValue ) => {
	button.isOn = newValue;
} );

command.on( 'change:isEnabled', ( event, propName, newValue, oldValue ) => {
	button.isEnabled = newValue;
} );
```

<a id="whats-next">

## What’s next

If you want to learn more about events and observables, see the [Observables](../../deep-dive/observables.md) and [Event system](../../deep-dive/event-system.md) documents.

Otherwise, go to the next chapter where you will [learn more about handling keystrokes](keystrokes.md), which also uses the CKEditor’s event system.

---

Full index of the CKEditor 5 documentation: [llms.txt](../../../../llms.txt)