eventHandlers

Optional. Adds event handlers to HTML elements of a custom template of List 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 List item

Example

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

const list = new dhx.List("list_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: List. Handling events in template

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

As an alternative way, you may use stopPropagation() for this purpose (from v7.3.6):

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

Change log:

added in v7.0