Library Reference
JS Library

Events

11min



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

JS




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

JS




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

JS






Updated 30 Oct 2023
Doc contributor
Doc contributor
Did this page help you?