# DomEventObserver

class

Base class for DOM event observers. This class handles [adding](module_engine_view_observer_observer-Observer.md#function-observe) listeners to DOM elements, [disabling](module_engine_view_observer_observer-Observer.md#function-disable) and [re-enabling](module_engine_view_observer_observer-Observer.md#function-enable) events. Child class needs to define [DOM event type](#member-domEventType) and [callback](#function-onDomEvent).

For instance:

```typescript
class ClickObserver extends DomEventObserver<'click'> {
	// It can also be defined as a normal property in the constructor.
	get domEventType(): 'click' {
		return 'click';
	}

	onDomEvent( domEvent: MouseEvent ): void {
		this.fire( 'click', domEvent );
	}
}
```

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

<a id="type-parameters">

## Type parameters

### `EventType: extends keyof HTMLElementEventMap`

DOM Event type name or an union of those.

### `AdditionalData: extends object = object`

Additional data passed along with the event.

<a id="properties">

## Properties

<a id="member-document">

### `document: ViewDocument` _(readonly)_

A reference to the [`ViewDocument`](module_engine_view_document-ViewDocument.md) object.

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

<a id="member-domEventType">

### `domEventType: EventType | readonly Array<EventType>` _(readonly)_

Type of the DOM event the observer should listen to. Array of types can be defined if the observer should listen to multiple DOM events.

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

<a id="member-isEnabled">

### `isEnabled: boolean` _(readonly)_

The state of the observer. If it is disabled, no events will be fired.

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

<a id="member-useCapture">

### `useCapture: boolean`

If set to `true` DOM events will be listened on the capturing phase. Default value is `false`.

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

<a id="member-usePassive">

### `usePassive: boolean`

If set to `true`, indicates that the function specified by listener will never call `preventDefault()`. Default value is `false`.

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

<a id="member-view">

### `view: EditingView` _(readonly)_

An instance of the view controller.

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

<a id="methods">

## Methods

<a id="function-constructor">

### `constructor( view )` _(inherited)_

Creates an instance of the observer.

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

#### Type parameters

* `EventType: extends keyof HTMLElementEventMap`

  DOM Event type name or an union of those.

* `AdditionalData: extends object = object`

  Additional data passed along with the event.

#### Parameters

* `view: EditingView`

<a id="function-checkShouldIgnoreEventFromTarget">

### `checkShouldIgnoreEventFromTarget( domTarget ) → boolean` _(inherited)_

Checks whether a given DOM event should be ignored (should not be turned into a synthetic view document event).

Currently, an event will be ignored only if its target or any of its ancestors has the `data-cke-ignore-events` attribute. This attribute can be used inside the structures generated by [`ViewDowncastWriter#createUIElement()`](module_engine_view_downcastwriter-ViewDowncastWriter.md#function-createUIElement) to ignore events fired within a UI that should be excluded from CKEditor 5's realms.

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

#### Parameters

* `domTarget: Node | null`

  The DOM event target to check (usually an element, sometimes a text node and potentially sometimes a document, too).

#### Returns

* `boolean`

  Whether this event should be ignored by the observer.

<a id="function-delegate">

### `delegate( events ) → EmitterMixinDelegateChain` _(inherited)_

Delegates selected events to another [`Emitter`](module_utils_emittermixin-Emitter.md). For instance:

```typescript
emitterA.delegate( 'eventX' ).to( emitterB );
emitterA.delegate( 'eventX', 'eventY' ).to( emitterC );
```

then `eventX` is delegated (fired by) `emitterB` and `emitterC` along with `data`:

```typescript
emitterA.fire( 'eventX', data );
```

and `eventY` is delegated (fired by) `emitterC` along with `data`:

```typescript
emitterA.fire( 'eventY', data );
```

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-utils/src/emittermixin.ts#L539)

#### Parameters

* `events: Array<string>`

  Event names that will be delegated to another emitter.

#### Returns

* `EmitterMixinDelegateChain`

<a id="function-destroy">

### `destroy() → void` _(inherited)_

Disables and destroys the observer, among others removes event listeners created by the observer.

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

#### Returns

* `void`

<a id="function-disable">

### `disable() → void` _(inherited)_

Disables the observer. This method is called before [rendering](module_engine_view_view-EditingView.md#function-forceRender) to prevent firing events during rendering.

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

#### Returns

* `void`

#### Related:

* [Observer#enable](module_engine_view_observer_observer-Observer.md#function-enable)

<a id="function-enable">

### `enable() → void` _(inherited)_

Enables the observer. This method is called when the observer is registered to the [`EditingView`](module_engine_view_view-EditingView.md) and after [rendering](module_engine_view_view-EditingView.md#function-forceRender) (all observers are [disabled](#function-disable) before rendering).

A typical use case for disabling observers is that mutation observers need to be disabled for the rendering. However, a child class may not need to be disabled, so it can implement an empty method.

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

#### Returns

* `void`

#### Related:

* [Observer#disable](module_engine_view_observer_observer-Observer.md#function-disable)

<a id="function-fire">

### `fire( eventType, domEvent, additionalData? ) → void`

Calls `Document#fire()` if observer [is enabled](#member-isEnabled).

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

#### Parameters

* `eventType: string | EventInfo<string, unknown>`

  The event type (name).

* `domEvent: Event`

  The DOM event.

* `additionalData?: AdditionalData`

  The additional data which should extend the [event data](module_engine_view_observer_domeventdata-ViewDocumentDomEventData.md) object.

#### Returns

* `void`

#### Related:

* [Emitter#fire](module_utils_emittermixin-Emitter.md#function-fire)

<a id="function-listenTo:DOM_EMITTER">

### `listenTo( emitter, event, callback, options? ) → void` _(inherited)_

Registers a callback function to be executed when an event is fired in a specific (emitter) object.

Events can be grouped in namespaces using `:`. When namespaced event is fired, it additionally fires all callbacks for that namespace.

```typescript
// myEmitter.on( ... ) is a shorthand for myEmitter.listenTo( myEmitter, ... ).
myEmitter.on( 'myGroup', genericCallback );
myEmitter.on( 'myGroup:myEvent', specificCallback );

// genericCallback is fired.
myEmitter.fire( 'myGroup' );
// both genericCallback and specificCallback are fired.
myEmitter.fire( 'myGroup:myEvent' );
// genericCallback is fired even though there are no callbacks for "foo".
myEmitter.fire( 'myGroup:foo' );
```

An event callback can [stop the event](module_utils_eventinfo-EventInfo.md#member-stop) and set the [return value](module_utils_eventinfo-EventInfo.md#member-return) of the [`fire`](#function-fire) method.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-utils/src/dom/emittermixin.ts#L452)

#### Type parameters

* `TEvent: extends BaseEvent`

  The type describing the event. See [`BaseEvent`](module_utils_emittermixin-BaseEvent.md).

#### Parameters

* `emitter: Emitter`

  The object that fires the event.

* `event: TEvent[ 'name' ]`

  The name of the event.

* `callback: GetCallback<TEvent>`

  The function to be called on event.

* `options?: CallbackOptions`

  Additional options.

#### Returns

* `void`

<a id="function-listenTo:BASE_EMITTER">

### `listenTo( emitter, event, callback, options? ) → void` _(inherited)_

Registers a callback function to be executed when an event is fired in a specific (emitter) object.

Events can be grouped in namespaces using `:`. When namespaced event is fired, it additionally fires all callbacks for that namespace.

```typescript
// myEmitter.on( ... ) is a shorthand for myEmitter.listenTo( myEmitter, ... ).
myEmitter.on( 'myGroup', genericCallback );
myEmitter.on( 'myGroup:myEvent', specificCallback );

// genericCallback is fired.
myEmitter.fire( 'myGroup' );
// both genericCallback and specificCallback are fired.
myEmitter.fire( 'myGroup:myEvent' );
// genericCallback is fired even though there are no callbacks for "foo".
myEmitter.fire( 'myGroup:foo' );
```

An event callback can [stop the event](module_utils_eventinfo-EventInfo.md#member-stop) and set the [return value](module_utils_eventinfo-EventInfo.md#member-return) of the [`fire`](#function-fire) method.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-utils/src/emittermixin.ts#L475)

#### Type parameters

* `TEvent: extends BaseEvent`

  The type describing the event. See [`BaseEvent`](module_utils_emittermixin-BaseEvent.md).

#### Parameters

* `emitter: Emitter`

  The object that fires the event.

* `event: TEvent[ 'name' ]`

  The name of the event.

* `callback: GetCallback<TEvent>`

  The function to be called on event.

* `options?: GetCallbackOptions<TEvent>`

  Additional options.

#### Returns

* `void`

<a id="function-listenTo:HTML_EMITTER">

### `listenTo( emitter, event, callback, options? ) → void` _(inherited)_

Registers a callback function to be executed when an event is fired in a specific Emitter or DOM Node. It is backwards compatible with [`listenTo`](module_utils_emittermixin-Emitter.md#function-listenTo:BASE_EMITTER).

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-utils/src/dom/emittermixin.ts#L416)

#### Type parameters

* `K: extends keyof DomEventMap`

#### Parameters

* `emitter: Window | EventTarget | Node`

  The object that fires the event.

* `event: K`

  The name of the event.

* `callback: ( this: this, ev: EventInfo, event: DomEventMap[ K ] ) => void`

  The function to be called on event.

* `options?: CallbackOptions & object`

  Additional options.

#### Returns

* `void`

<a id="function-observe">

### `observe( domElement ) → void`

Starts observing given DOM element.

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

#### Parameters

* `domElement: HTMLElement`

  DOM element to observe.

#### Returns

* `void`

<a id="function-off">

### `off( event, callback ) → void` _(inherited)_

Stops executing the callback on the given event. Shorthand for [`this.stopListening( this, event, callback )`](#function-stopListening:DOM_STOP).

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-utils/src/emittermixin.ts#L444)

#### Parameters

* `event: string`

  The name of the event.

* `callback: Function`

  The function to stop being called.

#### Returns

* `void`

<a id="function-on">

### `on( event, callback, options? ) → void` _(inherited)_

Registers a callback function to be executed when an event is fired.

Shorthand for [`this.listenTo( this, event, callback, options )`](#function-listenTo:HTML_EMITTER) (it makes the emitter listen on itself).

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-utils/src/emittermixin.ts#L416)

#### Type parameters

* `TEvent: extends BaseEvent`

  The type descibing the event. See [`BaseEvent`](module_utils_emittermixin-BaseEvent.md).

#### Parameters

* `event: TEvent[ 'name' ]`

  The name of the event.

* `callback: GetCallback<TEvent>`

  The function to be called on event.

* `options?: GetCallbackOptions<TEvent>`

  Additional options.

#### Returns

* `void`

<a id="function-onDomEvent">

### `onDomEvent( event ) → void`

Callback which should be called when the DOM event occurred. Note that the callback will not be called if observer [is not enabled](#member-isEnabled).

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

#### Parameters

* `event: HTMLElementEventMap[ EventType ]`

#### Returns

* `void`

#### Related:

* [DomEventObserver#domEventType](#member-domEventType)

<a id="function-once">

### `once( event, callback, options? ) → void` _(inherited)_

Registers a callback function to be executed on the next time the event is fired only. This is similar to calling [`on`](#function-on) followed by [`off`](#function-off) in the callback.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-utils/src/emittermixin.ts#L431)

#### Type parameters

* `TEvent: extends BaseEvent`

  The type descibing the event. See [`BaseEvent`](module_utils_emittermixin-BaseEvent.md).

#### Parameters

* `event: TEvent[ 'name' ]`

  The name of the event.

* `callback: GetCallback<TEvent>`

  The function to be called on event.

* `options?: GetCallbackOptions<TEvent>`

  Additional options.

#### Returns

* `void`

<a id="function-stopDelegating">

### `stopDelegating( event?, emitter? ) → void` _(inherited)_

Stops delegating events. It can be used at different levels:

* To stop delegating all events.
* To stop delegating a specific event to all emitters.
* To stop delegating a specific event to a specific emitter.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-utils/src/emittermixin.ts#L552)

#### Parameters

* `event?: string`

  The name of the event to stop delegating. If omitted, stops it all delegations.

* `emitter?: Emitter`

  (requires `event`) The object to stop delegating a particular event to. If omitted, stops delegation of `event` to all emitters.

#### Returns

* `void`

<a id="function-stopListening:BASE_STOP">

### `stopListening( emitter?, event?, callback? ) → void` _(inherited)_

Stops listening for events. It can be used at different levels:

* To stop listening to a specific callback.
* To stop listening to a specific event.
* To stop listening to all events fired by a specific object.
* To stop listening to all events fired by all objects.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-utils/src/emittermixin.ts#L497)

#### Parameters

* `emitter?: Emitter`

  The object to stop listening to. If omitted, stops it for all objects.

* `event?: string`

  (Requires the `emitter`) The name of the event to stop listening to. If omitted, stops it for all events from `emitter`.

* `callback?: Function`

  (Requires the `event`) The function to be removed from the call list for the given `event`.

#### Returns

* `void`

<a id="function-stopListening:DOM_STOP">

### `stopListening( emitter?, event?, callback? ) → void` _(inherited)_

Stops listening for events. It can be used at different levels: It is backwards compatible with [`listenTo`](module_utils_emittermixin-Emitter.md#function-listenTo:BASE_EMITTER).

* To stop listening to a specific callback.
* To stop listening to a specific event.
* To stop listening to all events fired by a specific object.
* To stop listening to all events fired by all objects.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-utils/src/dom/emittermixin.ts#L476)

#### Parameters

* `emitter?: Window | EventTarget | Node | Emitter`

  The object to stop listening to. If omitted, stops it for all objects.

* `event?: string`

  (Requires the `emitter`) The name of the event to stop listening to. If omitted, stops it for all events from `emitter`.

* `callback?: Function`

  (Requires the `event`) The function to be removed from the call list for the given `event`.

#### Returns

* `void`

<a id="function-stopObserving">

### `stopObserving( domElement ) → void`

Stops observing given DOM element.

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

#### Parameters

* `domElement: HTMLElement`

#### Returns

* `void`

---

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