Marked as work-in-progress (WIP). The content of this post may be unreliable or incomplete. Please check back later.
Open comments page
App Infrastructure Code:
How to make your web app installable.
truePlain JavaScript starter code to organize event listeners in an application screen, mapped using data- HTML attribute.
Project size: small.
Suitable for: blog, single-page application (SPA), browser extension.
Language: vanilla/plain JavaScript.
Framework: none.
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.
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.jsRepository: 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"]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>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',
},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);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);