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

object eventHandlers;


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);             },         }     } });

Related samples


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;
            console.log("button click");
See also
Change log

added in v5.0

Back to top