<div id=-demo-wrapper>
	<h3>Type in the event type <code>input</code>, <code>click</code> or <code>mouseover</code></h3>
	<pre>
function foo(evt) {
  this.value = 
  'The event ‘foo’ listening for is, ‘' + evt.type + '’';
}
testee.addEventListener(<span class=-demo-string>'<input class=-demo-txt type=text/>'</span>, foo, false);
</pre>
	<br /><button class=-demo-btn>Add</button> <label></label>
	<br /><br />
	<input type="text" class="testee" placeholder="The testee element" />
</div>

.testee {
	width: 100%;
	border: 1px solid lightgrey;
	padding: 5px;
	font-family: Crimson Text;
	font-size: 13pt;
}


/* styles for demo */

#-demo-wrapper {
	padding-top: 36px;
}

.-demo-string {
	color: #48B492;
	font-family: courier;
}

.-demo-txt {
	border: 0;
	outline: 0;
	border-bottom: 1px dotted lightgrey;
	font-size: 1em;
	width: 125px;
	color: #48B492;
	font-family: courier;
}

.-demo-btn {
	background-color: #F7E00E;
	border: 0;
	outline: 0;
	padding: 3px;
	border-radius: 2px;
	cursor: pointer;
}

pre {
	text-align: left;
	font-size: 11pt;
}

.testee,
pre {
	width: 520px;
	margin: auto;
}

body {
	font-family: Crimson Text;
	font-size: 13pt;
	text-align: center;
	margin: 0;
}

var _ = document.querySelector.bind(document),
  label = _('label'),
  testee = _('.testee'),
  par = _('.-demo-txt'),
  evts = ['input', 'click', 'mouseover'];

function foo(evt) {
  this.value = 'The event ‘foo’ listening for is, ‘' + evt.type + '’';
}

_('button').onclick = () => {
  for (var i = -1; i <= evts.length; testee.removeEventListener(evts[i++], foo));
  var evt = par.value;
  if (evts.indexOf(evt) === -1) {
    label.textContent = ' \u2192 Pick an event from ' + evts + ' to add';
    return;
  }
  testee.addEventListener(evt, foo, false);
  label.textContent = '\u2713 Added event listener for \'' + evt + '\' to testee';
}

par.onfocus = () => {
  label.textContent = testee.value = par.value = '';
  for (var i = -1; i <= evts.length; testee.removeEventListener(evts[i++], foo));
}