Native init element structural example

main.js

(function () {
  
  var initElement = function (options) {
    
    var getSize = function(obj) {
      var size = 0, key;
      for (key in obj) {
          if (obj.hasOwnProperty(key)) size++;
      }
      return size;
    };
    
    var addEvent = function (elem, event, fn) {
      function listenHandler(e) {
        var ret = fn.apply(this, arguments);
        if (ret === false) {
          e.stopPropagation();
          e.preventDefault();
        }
        return(ret);
      }
      if (elem.addEventListener) {
        elem.addEventListener(event, listenHandler, false);
      } else if (element.attachEvent) {
        element.attachEvent ("on" + type, fn);
      } else {
        elem.attachEvent("on" + event, attachHandler);
      }
    }
    
    var setEvents = function () {
      for (var countForEventsObj = 0, len = getSize(options.fn.events); countForEventsObj < len; countForEventsObj++) {
        addEvent(options.el, options.fn.events[countForEventsObj].name, options.fn.events[countForEventsObj].funcBody);
      }
    }
    
    var setCustomEvents = function () {
      for (var countForCustomsObj = 0, len = getSize(options.fn.customs); countForCustomsObj < len; countForCustomsObj++) {
        addEvent(options.el, options.fn.customs[countForCustomsObj].event, options.fn.customs[countForCustomsObj].funcBody);
      }
    }
    
    if (typeof options.el !== 'undefined' && options.init) {
      setEvents();
      setCustomEvents();
    } else {
      if (!options.init) {
        options.el.style.display = 'none';
      }
    }
  }
  
  initElement({
    el : document.querySelector('.navdrawer-container'),
    val : 'Test element.',
    fn : {
      events : [
        {
          name : 'click',
          funcBody : function () {
            console.log('clicked...');
          }
        },
        {
          name : 'dblclick',
          funcBody : function () {
            console.log('double-clicked...');
          }
        },
        {
          name : 'mouseover',
          funcBody : function () {
            console.log('mouse-hovered...');
          }
        }
      ],
      customs : [
        {
          name : 'setValue',
          event : 'click',
          funcBody : function () {
            this.innerHTML = '<div>Navigation Element</div>';
          }
        }
      ]
    },
    init : true
  });
  
})();