Recorder for keyboard and mouse events

I'm building an event recorder. So far the code looks clean, but I feel like I'm missing something that can make this code even better.

Is composition a better solution? If yes, how can I do it properly in this context. Do you know a better way to share the Recorder across all other components? Will it be better to initialize the recorder in app.js and then pass it to the other components (mouse, keyboard)?

Mouse.js and Keyboard.js look pretty much the same, except they record different event types. Is there a way to avoid repetition (stop and record method)? Just tell me what you think about the logic.

This needs to be flexible because I have no idea how many events I will need to record in the future.

app.js

export default (params) => {
  const container = document.getElementById(params.container),
        recorder = Recorder('session'),
        keyboard = Keyboard(),
        mouse = Mouse(container);

  const startRecording = () => {
    recorder.record('Start recording');
    keyboard.record();
    mouse.record();
  }

  const stopRecording = () => {
    keyboard.stop();
    mouse.stop();
    recorder.record('Stop recording');
  }

  const init = () => {
    document.getElementById('start').onclick = (e) => {
      e.preventDefault();
      startRecording();
    };
    document.getElementById('stop').onclick = (e) => {
      e.preventDefault();
      stopRecording();
    };
  }

  return {
    init
  }
}

recorder.js

import Data from '../db/eventsLog';
import moment from 'moment';

export default (type) => {
  const record = (input) => {
    const t = moment().unix();
    Data[type].push({t, event: input});
  }

  return {
    record
  }
}

keyboard.js

```
import Recorder from './recorder';

export default () => {
const recorder = Recorder('keyboard');

const initRecorder = (recording) => {
document.onkeydown = (e) => {
if (recording) {
recorder.record(e);
}
};
};

const record = () => initRecorder(true)

I was going to put this as a comment, but could not show formatted code, so this will have to be an answer.

If you ever want to adapt your script to records "all" events, you could use something like this:

var Events = Object.keys(window).reduce(function(events, prop){
        if( prop.substring(0,2) === 'on' ){
            events.push(prop.slice(2));
        }
        return events;
    }, []);

    Events.forEach(function(event){
        window.addEventListener(event, function(e){
            console.log(event + " fired");
        })
    })

You would definitely want to debounce your event recordings, otherwise you will eat up a lot of the event loop.

There are other events, in the browser, but these are almost all of them, for a complete list checkout MDN Events and MDN Event - Web APIs for more details.

StackExchange Code Review Q#124795, answer score: 2