eventHandlers

Optional. Adds event handlers to HTML elements of a custom template of Combobox items

eventHandlers?: {
    [eventName: string]: {
        [className: string]: (event: Event, id: string | number) => void | boolean; 
    };
};

Parameters:

The eventHandlers object includes a set of key:value pairs, where:

key	the name of the event. Note, that at the beginning of the event name the 'on' prefix is used (onclick, onmouseover).
value	an object that contains a key:value pair, where key is the css class name that the handler will be applied to and value is a function that takes two parameters: event - an event object id - the id of a Combobox item

Example

function template() {
    return "<div className='class_name'></div>";
}

const combobox  = new dhx.Combobox("combobox_container", {
    template: template,
    eventHandlers: {
        onclick: {
            class_name: function(event) {
                console.log("You clicked on " + event.target.tagName);
                // return false;
            },
        },
        onmouseover: {
            class_name: function(event, id) {
                console.log("Item ID: " + id);
            },
        }
    }
});

Related sample: Combobox. HTML template and handling events

Note. Returning false from a handler function will stop the template event bubbling and block triggering of an event on the item with className.

As an alternative way, you may use stopPropagation() for this purpose:

eventHandlers: {
    onclick: {
        class_name: (event) => {                              
            evt = event || window.event;
            evt.stopPropagation();
            console.log("button click");
        }
    }
}

Change log:

Added in v8.4