# BubblingEmitter

typedef

Bubbling emitter for the view document.

Bubbling emitter is triggering events in the context of specified [view element](module_engine_view_element-ViewElement.md) name, predefined `'$text'`, `'$root'`, `'$document'` and `'$capture'` contexts, and context matchers provided as a function.

Before bubbling starts, listeners for `'$capture'` context are triggered. Then the bubbling starts from the deeper selection position (by firing event on the `'$text'` context) and propagates the view document tree up to the `'$root'` and finally the listeners at `'$document'` context are fired (this is the default context).

Examples:

```typescript
// Listeners registered in the context of the view element names:
this.listenTo( viewDocument, 'enter', ( evt, data ) => {
	// ...
}, { context: 'blockquote' } );

this.listenTo( viewDocument, 'enter', ( evt, data ) => {
	// ...
}, { context: 'li' } );

// Listeners registered in the context of the '$text' and '$root' nodes.
this.listenTo( view.document, 'arrowKey', ( evt, data ) => {
	// ...
}, { context: '$text', priority: 'high' } );

this.listenTo( view.document, 'arrowKey', ( evt, data ) => {
	// ...
}, { context: '$root' } );

// Listeners registered in the context of custom callback function.
this.listenTo( view.document, 'arrowKey', ( evt, data ) => {
	// ...
}, { context: isWidget } );

this.listenTo( view.document, 'arrowKey', ( evt, data ) => {
	// ...
}, { context: isWidget, priority: 'high' } );
```

Example flow for selection in text:

```xml
<blockquote><p>Foo[]bar</p></blockquote>
```

Fired events on contexts:

1. `'$capture'`
2. `'$text'`
3. `'p'`
4. `'blockquote'`
5. `'$root'`
6. `'$document'`

Example flow for selection on element (i.e., Widget):

```xml
<blockquote><p>Foo[<widget/>]bar</p></blockquote>
```

Fired events on contexts:

1. `'$capture'`
2. _widget_ (custom matcher)
3. `'p'`
4. `'blockquote'`
5. `'$root'`
6. `'$document'`

There could be multiple listeners registered for the same context and at different priority levels:

```html
<p>Foo[]bar</p>
```

1. `'$capture'` at priorities:

   1. `'highest'`
   2. `'high'`
   3. `'normal'`
   4. `'low'`
   5. `'lowest'`

2. `'$text'` at priorities:

   1. `'highest'`
   2. `'high'`
   3. `'normal'`
   4. `'low'`
   5. `'lowest'`

3. `'p'` at priorities:

   1. `'highest'`
   2. `'high'`
   3. `'normal'`
   4. `'low'`
   5. `'lowest'`

4. `'$root'` at priorities:

   1. `'highest'`
   2. `'high'`
   3. `'normal'`
   4. `'low'`
   5. `'lowest'`

5. `'$document'` at priorities:

   1. `'highest'`
   2. `'high'`
   3. `'normal'`
   4. `'low'`
   5. `'lowest'`

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/observer/bubblingemittermixin.ts#L425)

#### Value

`Emitter`

---

Full index of the CKEditor 5 API reference: [llms.txt](llms.txt)