# Class ComponentEvents

The `ComponentEvents` class is used by the various Coveo Component to trigger events and bind event handlers. It adds logic to execute handlers or triggers only when a component is "enabled", which serves as a way to avoid executing handlers on components that are invisible and inactive in the query.

Typically, a component is disabled when it is not active in the current `Tab`. It can also be disabled by external code, however.

To manually enable or disable a component, simply use its `enable` or `disable` method.

## Index

### Methods

- on
- onComponentOptions
- onQueryState
- onRootElement
- one
- oneQueryState
- oneRootElement
- trigger

### Constructors

- constructor

## Methods

### on

- on(el: HTMLElement | Window | Document, event: string, handler: Function): any

- - Defined in ui/Base/Component.ts :95

  Executes the handler for an event on a target element.

  Executes only if the component is enabled (see the `enable` method).

  #### Parameters

  - ##### el: HTMLElement | Window | Document

    The element from which the event originates.

  - ##### event: string

    The event for which to register a handler.

  - ##### handler: Function

    The function to execute when the event is triggered.

  #### Returns any

### onComponentOptions

- onComponentOptions<T>(eventType: string, attribute?: string, handler?: function): void

- - Defined in ui/Base/Component.ts :162

  Bind an event related specially to the component option model. This will build the correct string event and execute the handler only if the component is activated.

  #### Type parameters

  - #### T

  #### Parameters

  - ##### eventType: string

    The event type for which to register an event.

  - ##### Optional attribute: string

    The attribute for which to register an event.

  - ##### Optional handler: function

    The handler to execute when the query state event is triggered.

    - - (args: T): any

      - #### Parameters

        - ##### args: T

        #### Returns any

  #### Returns void

### onQueryState

- onQueryState<T>(eventType: string, attribute?: string, handler?: function): void

- - Defined in ui/Base/Component.ts :151

  Bind an event related specially to the query state model.
  This will build the correct string event and execute the handler only if the component is activated.

  #### Type parameters

  - #### T

  #### Parameters

  - ##### eventType: string

    The event type for which to register an event.

  - ##### Optional attribute: string

    The attribute for which to register an event.

  - ##### Optional handler: function

    The handler to execute when the query state event is triggered.

    - - (args: T): any

      - #### Parameters

        - ##### args: T

        #### Returns any

  #### Returns void

### onRootElement

- onRootElement<T>(event: string, handler: function): void

- - Defined in ui/Base/Component.ts :129

  Bind on the "root" of the Component. The root is typically the SearchInterface.
  Bind an event using native javascript code.

  #### Type parameters

  - #### T

  #### Parameters

  - ##### event: string

    The event for which to register an handler.

  - ##### handler: function

    The function to execute when the event is triggered.

    - - (args: T): any

      - #### Parameters

        - ##### args: T

        #### Returns any

  #### Returns void

### one

- one(el: HTMLElement, event: string, handler: Function): any

- - Defined in ui/Base/Component.ts :113

  Executes the handler for the given event on the given target element.
  Execute only if the component is "enabled" (see Component.enable).
  Execute the handler only ONE time.

  #### Parameters

  - ##### el: HTMLElement

    The target on which the event will originate.

  - ##### event: string

    The event for which to register an handler.

  - ##### handler: Function

    The function to execute when the event is triggered.

  #### Returns any

### oneQueryState

- oneQueryState<T>(eventType: string, attribute?: string, handler?: function): void

- - Defined in ui/Base/Component.ts :174

  Bind an event related specially to the query state model.
  This will build the correct string event and execute the handler only if the component is activated.
  Will execute only once.

  #### Type parameters

  - #### T

  #### Parameters

  - ##### eventType: string

    The event type for which to register an event.

  - ##### Optional attribute: string

    The attribute for which to register an event.

  - ##### Optional handler: function

    The handler to execute when the query state event is triggered.

    - - (args: T): any

      - #### Parameters

        - ##### args: T

        #### Returns any

  #### Returns void

### oneRootElement

- oneRootElement<T>(event: string, handler: function): void

- - Defined in ui/Base/Component.ts :140

  Bind on the "root" of the Component. The root is typically the SearchInterface.
  Bind an event using native javascript code. The handler will execute only ONE time.

  #### Type parameters

  - #### T

  #### Parameters

  - ##### event: string

    The event for which to register an handler.

  - ##### handler: function

    The function to execute when the event is triggered.

    - - (args: T): any

      - #### Parameters

        - ##### args: T

        #### Returns any

  #### Returns void

### trigger

- trigger(el: HTMLElement, event: string, args?: Object): any

- - Defined in ui/Base/Component.ts :184

  Trigger an event on the target element, with optional arguments.

  #### Parameters

  - ##### el: HTMLElement

    The target HTMLElement on which to trigger the event.

  - ##### event: string

    The event to trigger.

  - ##### Optional args: Object

    The optional argument to pass to the handlers.

  #### Returns any

## Constructors

### constructor

- new ComponentEvents(owner: Component): ComponentEvents

- - Defined in ui/Base/Component.ts :77

  Creates a new `ComponentEvents` instance for a `Component`.

  #### Parameters

  - ##### owner: Component

    The `Component` that owns the event handlers and triggers.

  #### Returns ComponentEvents

### Hierarchy

- ComponentEvents