Handling DOM Events

Files

js/
  libs/
    dom-events.js
  events-map.js
  main-component.js
index.html
index.js

Source Code

index.html

<button data-onclick="greet"> Greet </button>

js/events-map.js

let eventsMap = {
    onclick: {
        'greet': () => compoMain.Greet(),
    },
};

index.js

{
	urls: [
		"js/utils/dom-events.js", 
		"js/events-map.js",
	],
	callback: function () {
		DOMEvents.Listen(eventsMap);
	},
},

js/main-component.js

let compoMain = (function () {
	// # self
	let SELF = {
		Greet,
	};

	// # function

	function Greet() {
		console.log(1);
	}

	return SELF;
})();

js/libs/dom-events.js

let DOMEvents = (function() {
  
  const commonEventTypes = {
    onclick: 'click',
    ondblclick: 'dblclick',
    onmousedown: 'mousedown',
    onmouseup: 'mouseup',
    onmousemove: 'mousemove',
    onmouseover: 'mouseover',
    onmouseout: 'mouseout',
    ontouchstart: 'touchstart',
  
    onkeypress: 'keypress',
    onkeydown: 'keydown',
    onkeyup: 'keyup',
    onfocus: 'focus',
    onblur: 'blur',
    
    oninput: 'input',
    onchange: 'change',
    onsubmit: 'submit',
    onreset: 'reset'
  };

  function notImplemented() {
    console.error('Not implemented')
  }

  let attachListeners = function(attr, eventType, callbacks, containerEl) {
    let elements = containerEl.querySelectorAll(`[${attr}]`);
    for (let el of elements) {
      let callbackFunc = callbacks?.[el.getAttribute(attr)] ?? notImplemented;
      el.addEventListener(eventType, callbackFunc);
    }
  };
  
  function Listen(eventsMap, containerEl=document) {
    let {groupKey} = eventsMap;
    let infix = groupKey ? `-${groupKey}` : '';

    for (let key in eventsMap) {
      if (key == 'groupKey') continue;
      
      let callbackMap = eventsMap[key];
      let eventType = callbackMap.eventType ?? getCommonEventType(key);

      if (!eventType) {
        console.error('Event type not defined:', key);
        continue;
      }
      attachListeners(`data${infix}-${key}`, eventType, callbackMap, containerEl);
    }
  }
  
  function getCommonEventType(key) {
    return commonEventTypes[key];
  }
  
  return {
    Listen,
  };

})();