# FocusObserver

class

[Focus](module_engine_view_document-ViewDocument.md#event-focus) and [blur](module_engine_view_document-ViewDocument.md#event-blur) events observer. Focus observer handle also [isFocused](module_engine_view_rooteditableelement-ViewRootEditableElement.md#member-isFocused) property of the [root elements](module_engine_view_rooteditableelement-ViewRootEditableElement.md).

Note that this observer is attached by the [`EditingView`](module_engine_view_view-EditingView.md) and is available by default.

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

<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: readonly [ 'focus', 'blur' ]` _(readonly)_

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

<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` _(inherited)_

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` _(inherited)_

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="member-_isFocusChanging">

### `_isFocusChanging: boolean` _(private)_

Set to `true` if the document is in the process of setting the focus.

The flag is used to indicate that setting the focus is in progress.

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

<a id="member-_renderTimeoutId">

### `_renderTimeoutId: Timeout | null` _(private)_

Identifier of the timeout currently used by focus listener to delay rendering execution.

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

<a id="methods">

## Methods

<a id="function-constructor">

### `constructor( view )`

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

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

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/focusobserver.ts#L118)

#### 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` _(inherited)_

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?: object`

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

### `flush() → void`

Finishes setting the document focus state.

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

#### Returns

* `void`

<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` _(inherited)_

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( domEvent ) → 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/focusobserver.ts#L90)

#### Parameters

* `domEvent: FocusEvent`

#### Returns

* `void`

#### Related:

* [FocusObserver#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` _(inherited)_

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`

<a id="function-_clearTimeout">

### `_clearTimeout() → void` _(private)_

Clears timeout.

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

#### Returns

* `void`

<a id="function-_handleBlur">

### `_handleBlur( data ) → void` _(private)_

The `blur` event handler.

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

#### Parameters

* `data: ViewDocumentDomEventData<FocusEvent>`

#### Returns

* `void`

<a id="function-_handleFocus">

### `_handleFocus() → void` _(private)_

The `focus` event handler.

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

#### Returns

* `void`

---

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