---
title: "Event Emitter"
description: "The core event system of Jodit for subscribing to, firing, and unsubscribing from custom events as well as native DOM and browser events."
metadata:
  - name: keywords
    content: "jodit, event emitter, events, on off fire, dom events, event handling"
---
# Event Emitter

This is the heart of Jodit. All processes inside Jodit mostly flow through events.

```js
const jodit = Jodit.make('#editor');
jodit.e.on('someEvent', param => alert(`Some event fired for ${param}!!!`));
jodit.async.setTimeout(() => {
  jodit.e.fire('someEvent', 'you');
}, 1000);
```

In addition to custom events, the emitter can work with DOM elements and browser events:

```js
jodit.e.on(document.body, 'click', () => alert(`Doc click!!!`));
```

If you don't want to listen to the event anymore, you can unsubscribe from it:

```js
jodit.e
  .one('someEvent', param => alert(`Some event fired for ${param}!!!`))
  .one('someEvent', param => alert(`Some event fired for ${param}!!!`))
  .one('someEvent', param => alert(`Some event fired for ${param}!!!`));

jodit.e.off('someEvent'); // will unsubscribe from all handlers
```

```js
const handler1 = param => alert(`Some event fired for ${param}!!!`);
const handler2 = param => alert(`Some event fired for ${param}!!!`);
const handler3 = param => alert(`Some event fired for ${param}!!!`);

jodit.e
  .one('someEvent', handler1)
  .one('someEvent', handler2)
  .one('someEvent', handler3);

jodit.e.off('someEvent', handler1); // only handler1 will unsubscribe
```


## Classes

- [EventEmitter](../classes/event_emitter.EventEmitter.html)
- [Eventify](../classes/event_emitter.Eventify.html)
- [EventHandlersStore](../classes/event_emitter.EventHandlersStore.html)

### eventEmitter

`const` **eventEmitter**: [`EventEmitter`](../classes/event_emitter.EventEmitter.html)

Defined in: [src/core/event-emitter/global.ts:13](https://github.com/xdan/jodit/blob/main/src/core/event-emitter/global.ts#L13)

***

### defaultNameSpace

`const` **defaultNameSpace**: `"JoditEventDefaultNamespace"` = `'JoditEventDefaultNamespace'`

Defined in: [src/core/event-emitter/store.ts:19](https://github.com/xdan/jodit/blob/main/src/core/event-emitter/store.ts#L19)

### observable()

**observable**\<`T`, `O`\>(`obj`): `O`

Defined in: [src/core/event-emitter/observable.ts:65](https://github.com/xdan/jodit/blob/main/src/core/event-emitter/observable.ts#L65)

Makes any object an observable object

#### Type Parameters

| Type Parameter |
| ------ |
| `T` *extends* [`IDictionary`](./types.html#idictionary) |
| `O` *extends* [`IDictionary`](./types.html#idictionary) & [`IObservable`](../interfaces/types.IObservable.html) |

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `obj` | `T` |

#### Returns

`O`

#### Example

```js
const obj = {
  a: 1,
  b: {
    c: 5
  }
}

const obsObj = Jodit.modules.observable(obj);
console.log(obj === obsObj); // true
obsObj.on('change', () => {
  console.log('Object changed');
});
obsObj.on('change.a', () => {
  console.log('Key a changed');
});
obsObj.on('change.b.c', () => {
  console.log('Key b.c changed');
});

obj.a = 6;
// Object changed
// Key a changed

obj.b = {c: 6}
// Object changed

obj.b.c = 8
// Object changed
// Key b.c changed
```