---
title: Events
slug: template-js/events
docTags: 
createdAt: 2022-06-15T20:16:44.000Z
---



## DOM Events

Execute functions when DOM is fully loaded

`klevu.ready(object or functionSource) `

When the document is in ready state `klevu.isReady` will be true

- **name**: name of the function to be executed – unique per event
- **fire**: source code of the execution

`klevu.interactive(object or functionSource) `

When the Document enters the interactive state, if possible to detect or latest when the document is ready, when DOM is in this state `klevu.isInteractive` will be true

- **name**: name of the function to be executed – unique per event
- **fire**: source code of the execution

### Example

```javascript
klevu.ready(
  function(){
    console.log("document is loaded")
  }
);
```



## Defined Events (Attach)

Bind an event handler to the JavaScript event.

`klevu.event.attach : function ( target , event , callBack , useCapture )`

- **target **– dom node target
- **event **– js event name , refer to the [MDN Event Reference list](https://developer.mozilla.org/en-US/docs/Web/Events) for support
- **callBack **– function to be executed when event is fired
- **useCapture **–  default false – A Boolean indicating whether events of this type will be dispatched to the registered listener *before* being dispatched to any EventTarget beneath it in the DOM tree.

### Example

```javascript
klevu.event.attach(
 document.getElementsByTagName("body")[0],
 "click",
 function(){
    console.log("document is loaded")
  }
);
```



## Search Events

A list of search events and functions that help the power up of the search box and landing page

These are stored as part of the `klevu.searchEvents` formatted as follows

- **box**
  - focus – responsible for preprocessing the focus event and executing the scope chain chains.events.focus
  - keyup – responsible for preprocessing the keyUp event and executing the scope chain chains.events.keyUp
  - submit  – responsible for preprocessing the submit event and executing the scope chain chains.events.submit
- **general**
  - documentClick – responsible for preprocessing the document click event and executing the global chain **documentClick**
  - documentScroll – responsible for preprocessing the document scroll event and executing the global chain **documentScroll**
- **functions**
  - bindAllExtraEvents – activates the documentClick and documentScroll  events
  - bindAllSearchBoxes – selects all predefined boxes based on the selector and clones a base box for each one, also links the events for focus,keyup and submit

We automatically add a `coreEvent` named `buildSearch` that will execute when 

- the document is in interactive state
- the base search instance is build

This event will execute the 

- bindAllSearchBoxes
- bindAllExtraEvents



## Core Events

Core events are custom build and executed events.

The event will generate a klevuChain there is no data or scope on the created chain. The chain will execute from the time of creation for  **maxCount** times with an interval of **delay **or until the event evaluates to true via the **fire **function.

If the event has already executed any promise or attachment will be fired immediately.

### Interfaces

- **build **: function ( object ) – used to build a core event and define its functionality
- **fire **: function ( name ) – check if event chain can be executed and if yes execute it, stop the internal checking
- **attach **: function ( name , object ) – attach a function to event chain
  - name is the name of the even declared when building the event
  - object contains :
    - name: name of the function to be executed – unique per event
    - fire : source code of the execution
  - A function can be sent instead of the object
- **promise **: function ( name , object ) – promise function to event chain , same as attach

### Elements

A coreEvent element has the following possible parameters:

- **name **– event name, must be unique and will be used as reference in the attachments. building a already defined event will override fire function and can lead to unforeseen situations.
- **delay **– used to reference the delay between checks in ms. Default 0 ms
- **maxCount **– maximum number of repetitions until the event is abandoned. Default 100
- **fire **– function source that returns true/false , will be used to check when event chain will fire

### 
Example

```javascript
klevu.coreEvent.build({
    name : "testKlevuEvent",
    fire: function(){
        if ( !klevu.isReady) {
            return false;
        } 
        return true; 
    },
    maxCount: 500,
    delay:30
  });

klevu.coreEvent.attach("testKlevuEvent",
  function(){
    console.log("Klevu is ready");
  }
);
```