JavaScript Toolbar Example - Add Event// source http://jsbin.com/noveqe

jsbin.noveqe.css

.toolbar {
    background-color: #c6c6c6;
    /*height: 50px;*/
    padding: 5px;
}

.toolbar-item {
    display: inline-block;
    height: 50px;
    width: 50px;
    background-color: blue;
    margin: 5px;
}

.active {
    background-color: yellow;
}

.disabled {
    background-color: #eeeeee;
}

jsbin.noveqe.js

var oojs = (function(oojs) {
  
  // Create single element in Toolbar
  // @itemElement a single "span"
  var ToolbarItem = function (itemElement) {
    Object.defineProperty(this, "__el", {
      value : itemElement
    });
  };
  
  // Define properties of single element
  Object.defineProperties(ToolbarItem.prototype, {
    toggleActiveState : {
      value : function () {
        this.activated = ! this.activated;
      },
      enumerable : true
    },
    enabled : {
      get : function () {
        return ! this.__el.classList.contains("disabled");
      },
      set : function (value) {
        if (value) {
          this.__el.classList.remove("disabled");
        } else {
          this.__el.classList.add("disabled");
        }
      },
      enumerable : true
    },
    activated : {
      get : function () {
        return this.__el.classList.contains("active");
      },
      set : function (value) {
        if (value) {
          this.__el.classList.add("active");
        } else {
          this.__el.classList.remove("active");
        }
      },
      enumerable : true
    }
  });
  

  // Define collection of toolbar element
  // @itemElements collection of "span"
  var createToolbarItems = function (itemElements) {
    var items = [];

    [].forEach.call(itemElements, function (el, index, array) {
      var item = new ToolbarItem(el);

      items.push(item);
    });

    return items;
  };
  
  // Define Toolbar
  // @toolbarElement a single "div"
  var Toolbar = function (toolbarElement) {
    var items = toolbarElement.querySelectorAll(".toolbar-item");
    
    Object.defineProperties(this, {
      __el : {
        value : toolbarElement
      },
      items : {
        value : createToolbarItems(items),
        enumerable : true
      }
    });
  };
  
  // Define properties of Toolbar 
  Object.defineProperties(Toolbar.prototype, {
    add : {
      value : function (options) {
        var span = document.createElement("SPAN");
        span.className = "toolbar-item";

        this.__el.appendChild(span);

        var item = new ToolbarItem(span);

        this.items.push(item);
      },
      enumerable: true
    },
    remove : {
      value : function (index) {
        var len = this.items.length;

        if (index > len || index < 0) {
          throw new Error("Index is out of range");
        }

        var item = this.items[index];
        this.items.splice(index, 1);

        this.__el.removeChild(item.__el);

        item = null;
      },
      enumerable : true
    },
    appendTo : {
      value : function (parentElement) {
        parentElement.appendChild(this.__el);
      },
      enumerable : true
    }
  });

  // Define Toolbar.
  oojs.createToolbar = function(elementId) {
    var element = document.getElementById(elementId);

    if (! element) {
      element = document.createElement("DIV");
      element.id = elementId;
      element.className = "toolbar";
    }
    
    return new Toolbar(element);
  };

  return oojs;

})(oojs || {});

/* How to test at browser console
var toolbar = oojs.createToolbar("myToolbar");
toolbar.appendTo(document.body);
toolbar.add();
toolbar.add();
toolbar.add();
toolbar.remove(1);
toolbar.items[0].enabled = false;
toolbar.items[0].enabled = true;
toolbar.items[0].activated = true;
toolbar.items[0].activated = false;
toolbar.items[0].toggleActiveState();
*/