key/mouse event logger

key/mouse event logger

by Laurens Maneschijn

HTML

<div class="block noevents">
	<h1>
		<button onclick="this.parentNode.parentNode.remove();" title="close/dismiss this warning">X</button>
		WARNING!
	</h1>
	Not sure why, but page crashes after clicking anywhere below on first page load.<br>
	If you press "Run" once to reload the result iframe everything seems to be ok.<br>
	<br>
	Or just open the result in a seperate fullscreen window: 
	<a target="_blank" href="https://jsfiddle.net/ElMoonLite/xm14pbuo/show">[thisurl] /show</a><br>
	<hr>
</div>

<div class="block noevents">
	Type (and/or hold) keys or click to log events.
	Open console (F12) to see more details.
	Events in <span class="noevents">pink</span> areas are supressed (in options area and event log table).
	<a target="_blank" href="https://jsfiddle.net/ElMoonLite/xm14pbuo/embedded/result/" class="jsfiddle_fullscreenlink">fullscreen</a>
</div>
<div class="block noevents">
	<details>
		<summary>external reference links...</summary>
		<ul class="links">
			<li><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/Events">MDN list of event names</a></li>
			<li><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/Event">MDN Event and its basic properties, and list of subevents like MouseEvent</a></li>
			<li><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent">MDN KeyboardEvent</a></li>
			<li><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent">MDN MouseEvent</a></li>
			<li><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent">MDN WheelEvent</a></li>
			<li><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/DragEvent">MDN DragEvent</a></li>
			<li><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/Selection">MDN Selection</a></li>
			<li><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/Document/selectstart_event">MDN selectstart...

CSS

* {
  box-sizing: border-box;
}
html, body {
	font: 12px/12px Arial, Sans-serif;
    font-size: 12px;
	padding: 0;
	margin: 0;
}

.block {
	margin: 2px;
	padding: 2px;
	border: 1px solid black;
}
button, input[type="button"], input[type="reset"], input[type="submit"] {
	padding: 1px 2px;
}
input[type="radio"] {
	margin: 0 2px;
}
input, button, select, label {
	vertical-align: middle;
}


textarea {
	vertical-align: top;
}

textarea#ta {
	width: 100%;
	height: 200px;
	display: none;
}

table{
	border-collapse: collapse;
}
table th, table td {
	border: 1px solid #888;
}
table caption {
	text-align: left;
}
table caption #pending_events {
/*
	display: inline-block;
*/
	margin: 5px;
	padding: 5px;
}

select[multiple] {
	vertical-align: top;
	overflow: auto;
	max-height: 900px;
	transition: max-height 0.5s 0s ease-in-out;
}
select[multiple]:not(:hover):not(:focus) {
	max-height: 1.5em;
	transition: max-height 0.5s 0.5s ease-in-out;

/*
	animation: 3s linear 1s infinite running slidein;
*/
}
.noevents {
	background: rgba(255, 0, 255, 0.1);
}

tr.event_keyup     td:nth-child(3) { background-color: #ddddff; }
tr.event_keydown   td:nth-child(3) { background-color: #ddffff; }
tr.event_keypress  td:nth-child(3) { background-color: #ffddff; }
tr.event_mouseup   td:nth-child(3) { background-color: #ffaacc; }
tr.event_mousedown td:nth-child(3) { background-color: #ffccaa; }
tr.event_click     td:nth-child(3) { background-color: #ffaaaa; }
tr.event_mouseover td:nth-child(3) { background-color: #ffaacc; }
tr.event_mouseout  td:nth-child(3) { background-color: #ffccaa; }
tr.event_mousemove td:nth-child(3) { background-color: #ccffcc; }

ol, ul {
	margin: 0;
	padding: 0;
	display: inline-block;
	vertical-align: top;
}

ol li ,
ul li {
	margin: 0;
	padding: 0;
	margin-left: 20px;
}

/*
ul.links:not(:hover) li {
	display: none;
}
*/

form {
	margin: 2px;
	border: 1px solid blue;
}

label:hover {
    outline: 1px solid #80808080;
    background: #80808020;
}

JavaScript

// le sigh... console or some of its member methods are not always available...
var console = window.console;
if(!console || !console.clear || !console.log || !console.table || !console.group || !console.groupCollapsed || !console.groupEnd){
	var f = function(){};
	console = {clear: f, log:f, table:f, group: f, groupCollapsed: f, groupEnd: f};
}
console.clear();

// last event stored here, useful for console debugging:
window.lastevent = null;
window.lastevents = [];

var events = [
	{event:'keydown',   default_selected: true},
	{event:'keypress',  default_selected: true},
	{event:'keyup',     default_selected: true},
	{event:'mousedown', default_selected: true},
	{event:'mouseup',   default_selected: true},
	{event:'click',     default_selected: true},
	{event:'dblclick',  default_selected: true},
	{event:'auxclick',  default_selected: true},
	{event:'contextmenu', default_selected: true}, // similar to auxclick: right click on anything
	{event:'mouseover', default_selected: false},
	{event:'mouseout',  default_selected: false},
	{event:'mousemove', default_selected: false},
	{event:'wheel',     default_selected: true},
	{event:'select',    default_selected: true}, // NB: only works inside text input and textarea elements(?)
	{event:'selectstart',    default_selected: true}, // NB: only works outside text input and textarea elements.
	{event:'selectionchange', default_selected: false, target: document}, // NB: only works if attached to document (not document.body). also can't detect .noevents ot not. also spams a lot, so default off.
	{event:'drag',      default_selected: false, description:"This event is fired when an element or text selection is being dragged."},
	{event:'dragend',   default_selected: true, description:"This event is fired when a drag operation is being ended (by releasing a mouse button or hitting the escape key)."},
	{event:'dragenter', default_selected: true, description:"This event is fired when a dragged element or text selection enters a...