Event Handling

Common information

DHTMLX TOUCH allows to handle different events using its event handling system.

There are 2 ways to add a handler to the event:

  1. through the method attachEvent()
  2. through the parameter on

1. The method attachEvent()
You can attach several handlers to the same event and detach them using two respective methods:

//to attach event
  var myEvent = $$("someComponentId").attachEvent("onItemClick", function (){
      //event handler code
  })
//to detach event
  $$("someComponentId").detachEvent(myEvent);

2. The parameter 'on'
With help of the parameter on you can attach any event(s) to the related component. But you can't detach them later.

dhx.ui({
	 view:"list", 
         ...
	 on:{"itemClick": function(){alert("item has just been clicked");}}
);
  • Event names are case-insensitive.
  • $$(“someId”) lets you refer to any component.

See usage example here

Cancelable Events

All events with subword 'onbefore' can be cancelled. To cancel event you should return false within the appropriate event handler.

var myEvent = $$("someComponentId").attachEvent("onBeforeTabClick", function (){
    ...// some event handler code
    return false;
})

Accessible objects and data

Inside event handler you can refer to the holder component through keyword this.
Besides, most event handlers get incoming argument(s), like id of grid's row (see API Reference to know exactly what arguments are passed inside event handler).

Btw, using id of sub-element you can access data item associated with it and all its properties, even if they were not used to draw the element. For example:

$$("mylist").attachEvent("onafterselect",function(id){
    $$("top_label").setValue(this.item(id).name)
})

Special cases

Button click handler

Button click event handling is realized through the parameter click. All you need is to set this parameter to the desired handler function.

The technique in question can be applied to any button:

{view:"button", label:"Close", align:"right", click:"someFunction" }

See example of button click handler here

Keyboard events

By default, DHTMLX Touch doesn't support keyboard events. But you can add such events to the desired component using the following code:

dhx.extend($$("componentId"), dhx.KeyEvents);

2 events will be added to the component:

  • onKeyPress (code,ctrlKey,shiftKey,e) - fired when a user clicks a key.
  • onTimedKeyPress () - fired when a user clicks a key, but with delay. Useful when you want to start something just after a user stops entering text.
//adds key events to 'Input' control with id:"input_1"
dhx.extend($$("input_1"), dhx.KeyEvents);
$$("input_1").attachEvent("onKeyPress",function(key){
    alert(key);
});

Advanced

TOUCH events are blockable.
To block/unblock event you should use one of the appropriate methods:

  1. blockEvent() - to block triggering of all events of the component.

    $$("someComponentId").blockEvent(); 
  2. unblockEvent() - to enable (unblock) triggering of all events of the component.

    $$("someComponentId").unblockEvent();