Sample: dhtmlxTree

Event handlers

dhtmlxTree main page

This JavaScript tree example illustrates the ability to assign user-defined functions to different event handlers (e.g. Mouse Over, Mouse Out, Check, UnCheck, Select, Deselect). If you try to change a checkbox value, an alert box will appear. Alert box is displayed also when a tree node is selected. Confirm box will pop up if user opens or closes a node.
So, dhtmlxTree allows you to define any functions and attach them to event handlers in order to customize tree behavior. That enriches possibilities for user interaction with JavaScript tree interface.

 
<div id="treeBox" style="width:200;height:200"></div>
<script>
 
    tree=new dhtmlXTreeObject(document.getElementById('treeBox'),"100%","100%",0);
    ...
    tree.setDragHandler(onDrop);//set function object to call on drop
    tree.setOnClickHandler(onNodeSelect);//set function object to call on node select
    tree.setOnOpenHandler(aFunc);//set function to call on open/close node
    tree.setOnCheckHandler(aFunc);//set function to call on open/close node
    tree.setOnDblClickHandler(aFunc);//set function to call on dbl click</script>