<div id="toolbox">
  <fieldset>
    <legend>Add Event</legend>
    <select id="eventlist">
      <option value="click">Click</option>
      <option value="focusin">Focus In</option>
      <option value="focusout">Focus Out</option>
      <option value="mouseover">Mouse Over</option>
    </select>
    <button id="addevent" onclick="addEvent();">Add Event</button>
  </fieldset>
  <fieldset>
    <legend>Remove Event</legend>
    <select id="activeeventlist">

    </select>
    <button id="removeevent" onclick="removeEvent();">Remove Event</button>
  </fieldset>
</div>

<button id="test"> Test Button </button>
<div id="eventlog">
  <h3>Action Log</h3>
</div>
div#toolbox{
  width:250px;
  float:right;
  background-color:lightgreen;
}
var eventHandler = {
  events: [], //Array of events the element is subscribed to.

  bindEvent: function(event, callback, targetElement) {
    //remove any duplicate event 
    this.unbindEvent(event, targetElement);

    //bind event listener to DOM element
    targetElement.addEventListener(event, callback, false);

    this.events.push({
      type: event,
      event: callback,
      target: targetElement
    }); //push the new event into our events array.
  },

  findEvent: function(event) {
    return this.events.filter(function(evt) {
      return (evt.type === event); //if event type is a match return
    }, event)[0];
  },
  unbindEvent: function(event, targetElement) {
    //search events
    var foundEvent = this.findEvent(event);

    //remove event listener if found
    if (foundEvent !== undefined) {
      targetElement.removeEventListener(event, foundEvent.event, false);
    }

    //update the events array
    this.events = this.events.filter(function(evt) {
      return (evt.type !== event);
    }, event);
  }
};

var testBtn = document.getElementById('test');
var log = document.getElementById('eventlog');

function logMsg(e) {
  if (e.type !== undefined) {
    log.innerHTML = log.innerHTML + '<br> Event triggered: ' + e.type;
  }
}

function addEvent() {
  var list = document.getElementById("eventlist");
  var selected = list.options[list.selectedIndex].value;
  eventHandler.bindEvent(selected, logMsg, document.getElementById('test'));
  activeList();
}

function activeList() {
  var list = document.getElementById('activeeventlist');
  list.innerHTML = '';
  eventHandler.events.forEach(function(e) {
    var opt = document.createElement('option');
    opt.setAttribute('value', e.type);
    opt.innerHTML = e.type;
    list.appendChild(opt);
  });
}

function removeEvent() {
  var list = document.getElementById("activeeventlist");
  var selected = list.options[list.selectedIndex].value;
  eventHandler.unbindEvent(selected, document.getElementById('test'));
  activeList();
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.