Report an issue

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

    Reference to the Document object.

  • domEventType : String | Array.<String>


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

  • isEnabled : Boolean

    readonly inherited

    State of the observer. If it is disabled events will not 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

    Instance of the view controller.


  • constructor( view )


    Creates an instance of the observer.


    view : View
  • 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.

    Overrides: Observer#observe
  • onDomEvent()

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