I have a system that is generating internal events for objects. I am extending their debugger to display a human-readable version of the events sent to the debugger.

For instance, the system will generate "OnClick" for the "Blue Button" control, on a "a-guid-value-for-the-view" view. If the readable version of "a-guid-value-for-the-view" is "Customer Edit View" I want to output

On the Customer Edit View, Blue Button was clicked.

To set this up, I will Map every event to a template literal which I evaluate dynamically. My code works but the setup of the Map in PopulateEvents looks too heavy. Is there a way to make this more readable?

//Setup the list of events
function populateEvents() {
        events = new Map([
            ["OnClick", function _renderEvent(viewId, controlName, properEvent) {
                return `On the ${_viewName(viewId)}, ${controlName} was ${properEvent}.`}],

    //Function to translate system event
    var eventName = function (eventParams) {
        return events.get(systemEventName)(viewId, controlName, properEvent);

    var viewName = function (viewId) {
        if (!views.has(viewId)) {
            views.set(viewId, fnToConvertViewIdToName(viewId))
        return views(viewId);

1 Answer 1


No. Use inheritance instead -- it is unnecessary to create a Map as there is no advantage to re-defining a handler for each event and to have to suffer the added processing time. It will be much much easier to add an event handler to the base object. I sugfgest you use inheritance & composition instead of a static implementation on each instance of your DOM-Objects -- You might need a quick re-read on event-handling in JS (or any favorite language).

Realize that an event is an event is an event and you only need a generic log handler that is a part of the event handling chain -- just install your callback function into the event chain so it gets handled for any and all events and then build a case-statement that switches on eventType to do the proper logging:

function anyEvent(event) {

    switch (event.eventType) {
        case "onclick":

               var view = dosomethingToGetTheView(event);
               var parent = getParentObject(event);
               var type = ...
               logEvent(view, event, parent, type...);


  • That's a great idea and I'll check into that but I'm not sure if I have access to this. I'm extending their debugging routine. That routine is giving me all the information I need in one place, so it's a case of translating the data in this function, which is why I'm using a Map. As for hooking into the events I'd have to work out what they're doing first which is a bunch of work, whereas I have all this right on hand.
    – strattonn
    Oct 17, 2018 at 23:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.