eventHandlers

adds event handlers to HTML elements of a custom template of Vault items

object eventHandlers;

Example

function listTemplate(item) {
    return "<div class='class_name'>" + item.name + "</div>";
}
 
const vault = new dhx.Vault("vault_container", {
    uploader: {
        target: "https://docs.dhtmlx.com/vault/backend/upload"
    },
    downloadURL: "https://docs.dhtmlx.com",
    templates: { 
        list: listTemplate
    },
    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);             },         }     } });
vault.data.load("https://snippet.dhtmlx.com/codebase/data/vault/01/dataset.json");

Related samples

Vault. HTML templates for the list mode

Details

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 the key is the CSS class name that the handler will be applied to and the value is a function that takes two parameters:
- event - an event object
- id - the id of a Vault item

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:

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