DHTMLX Docs & Samples Explorer

### Event Handling

Source

    <script type="text/javascript" src="../../codebase/dhtmlxcommon.js"></script>
    <script type="text/javascript" src="../../codebase/dhtmlxtoolbar.js"></script>
    <link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxtoolbar_dhx_skyblue.css"></link>

    <div style="height: 150px;"><div id="toolbarObj"></div></div>
    <div id="logBar" style="border: #E0E0E0 1px solid; margin-top: 20px; width: 500px; height: 200px; overflow: auto; font-family: Tahoma; font-size: 11px;"></div>
    <script>var toolbar;
    var i = 1;
    function doOnLoad() {
        toolbar = new dhtmlXToolbarObject("toolbarObj");
        toolbar.setIconsPath("../common/imgs/");
        toolbar.attachEvent("onXLS", function(id) {
            writeLog("<b>onXLS event</b> XML loading has started");
        });
        toolbar.attachEvent("onXLE", function(id) {
            writeLog("<b>onXLE event</b> XML was loaded");
        });
        toolbar.loadXML("../common/dhxtoolbar.xml?etc=" + new Date().getTime());
        toolbar.attachEvent("onClick", function(id) {
            writeLog("<b>onClick event</b> button(" + id + ") was clicked");
        });
        toolbar.attachEvent("onStateChange", function(id, state) {
            writeLog("<b>onStateChange event</b> button(" + id + ") was " + (state ? "pressed": "released"));
        });
        toolbar.attachEvent("onValueChange", function(id, value) {
            writeLog("<b>onValueChange event</b> item(" + id + ")'s value was changed to " + value);
        });
        toolbar.attachEvent("onEnter", function(id, value) {
            writeLog("<b>onEnter event</b> input(" + id + ")'s value was changed to " + value);
        });
    }
    function writeLog(data) {
        document.getElementById("logBar").innerHTML = String(i++) + ". " + data + "<br>" + document.getElementById("logBar").innerHTML;
        document.getElementById("logBar").innerHTML += "";
    }</script>