DomEventObserver (engine/view/observer)



Base class for DOM event observers. This class handles adding listeners to DOM elements, disabling and re-enabling events. Child class needs to define DOM event type and callback.

For instance:

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

	onDomEvent( domEvent ) { 'click', domEvent );



  • document : Document

    readonly inherited

    A reference to the Document object.

  • domEventType : String | Array.<String>


    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.

  • isEnabled : Boolean

    readonly inherited

    State of the observer. If it is disabled no events will be fired.

  • useCapture : Boolean

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

  • view : View

    readonly inherited

    An instance of the view controller.


  • constructor( view )


    Creates an instance of the observer.


    view : View
  • checkShouldIgnoreEventFromTarget( domTarget ) → Boolean


    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 DowncastWriter#createUIElement() to ignore events fired within a UI that should be excluded from CKEditor 5's realms.


    domTarget : Node

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



    Whether this event should be ignored by the observer.

  • destroy()


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

  • disable()


    Disables the observer. This method is called before rendering to prevent firing events during rendering.


  • enable()


    Enables the observer. This method is called when the observer is registered to the View and after rendering (all observers are disabled 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.


  • fire( eventType, domEvent, [ additionalData ] )

    Calls Document#fire() if observer is enabled.


    eventType : String

    The event type (name).

    domEvent : Event

    The DOM event.

    [ additionalData ] : Object

    The additional data which should extend the event data object.


  • observe( domElement, name )


    Starts observing the given root element.


    domElement : HTMLElement
    name : String

    The name of the root element.

  • onDomEvent()

    Callback which should be called when the DOM event occurred. Note that the callback will not be called if observer is not enabled.