Mapping DOM Event Listeners

Plain JavaScript starter code to organize event listeners in an application screen, mapped using data- HTML attribute.

Code Overview

• Project size: small.

• Suitable for: blog, single-page application (SPA), browser extension.

• Language: vanilla/plain JavaScript.

• Framework: none.

Introduction

When building plain JavaScript web app, you will eventually have to attach many event listeners. Click event is the most common one.

One approach is to create a file or function that handle event registering all in one place. Be it a single file or a component file.

This starter code provide transparency for the callback action in the HTML data- attribute, like so:

<button data-onclick="add-item"> Add </button>

And you will have an events map somewhere in your app:

let eventsMap = {
    onclick: {
      'add-item': () => { /* app.AddItem() */ },
    },
};

While it may be not suitable for production code due to the exposed event callback key, this gives better clarity and ease the maintenance process for those who just want to build a web app or blog for fun.

Takeaway Code

Script:

<script src="https://cdn.jsdelivr.net/gh/tmpmachine/vanilla-framework@3f09d68/js/infrastructure/libs/dom-events.js"></script>

CDN:

https://cdn.jsdelivr.net/gh/tmpmachine/vanilla-framework@3f09d68/js/infrastructure/libs/dom-events.js

Repository: dom-events.js

js/application/events-map.js

let eventsMap = {
    onclick: {
      'say-hello': () => alert('Hello world!'),
    },
};

index.js

DOMEvents.Listen(eventsMap);

index.html

[btn 'Say Hello' data-onclick="say-hello"]

Example

index.html

[btn 'Say Hello' data-onclick="say-hello"]
[hr]

[in type="text" data-oninput="typing"]
[
  Your input is: 
  [s #result]
]

<script src="https://cdn.jsdelivr.net/gh/tmpmachine/vanilla-framework@3f09d68/js/infrastructure/libs/dom-events.js"></script>
<script>

  let eventsMap = {
    onclick: {
      'say-hello': () => alert('Hello world!'),
    },
    oninput: {
      'typing': (event) => document.querySelector('#result').textContent = event.target.value,
    }
  }
  
  DOMEvents.Listen(eventsMap);
  
</script>

Included Event Types

Here are event types that are supported by default. Others can be defined manually in the next section.

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',
},

Configuration

Extend Existing Event Types

You can define custom event type mapping to extend the event list in the previous section. This will overwrite commonEventTypes with similar key.

DOMEvents.Configure({
  onpointerdown: 'pointerdown',
});

// DOMEvents.Listen(eventsMap);

Set Container

You can pass a container element to the second argument. By default it is set to document.

let containerEl = document; // e.g. current screen, sidebar, toolbar

DOMEvents.Listen(eventsMap, containerEl);