mouse and touch events

by Kyle Pennell

HTML

<div> <span class="event-indicator" id="touchstart"></span>
 <span class="event-indicator" id="touchmove"></span>
 <span class="event-indicator" id="touchend"></span>

    <br> <span class="event-indicator" id="mouseover"></span>
 <span class="event-indicator" id="mousemove"></span>
 <span class="event-indicator" id="mouseenter"></span>
 <span class="event-indicator" id="mouseleave"></span>
 <span class="event-indicator" id="mousedown"></span>
 <span class="event-indicator" id="mouseup"></span>
 <span class="event-indicator" id="click"></span>
 <span class="event-indicator" id="dblclick"></span>

    <br> <span class="event-indicator" id="mousewheel"></span>
 <span class="event-indicator" id="DOMMouseScroll"></span>
 <span class="event-indicator" id="onmousewheel"></span>

    <br> <span class="event-indicator" id="contextmenu"></span>

</div>
<br>
<div id="output"></div>

CSS

body {
    height:200vh;
}
.event-indicator {
    content: attr(id);
    background: red;
    padding: .5em;
    line-height: 2.5em;
}
.event-indicator:after {
    content: attr(id);
}

JavaScript

// Touch And Mouse: Together Again For The First Time - HTML5 Rocks
// http://www.html5rocks.com/en/mobile/touchandmouse/

'use strict';
var oL = document.querySelector('#output'),
    oA = [];

function sendOutput(e) {
    // e.preventDefault();
    if (document.querySelector('#' + e.type)) {
        document.querySelector('#' + e.type).style.cssText = 'background:green;';
    }
    var tmp = '';
    oA.push(e.type);
    if (oA.length > 6) oA.shift();
    oA.map(function (v) {
        tmp += v + '\n';
    });
    oL.innerText = tmp;
}

document.addEventListener('contextmenu', sendOutput);

document.addEventListener('touchstart', sendOutput);
document.addEventListener('touchmove', sendOutput);
document.addEventListener('touchend', sendOutput);
//
document.addEventListener('mouseover', sendOutput);
document.addEventListener('mousemove', sendOutput);
document.addEventListener('mouseenter', sendOutput);
document.addEventListener('mouseleave', sendOutput);
//
document.addEventListener('mousedown', sendOutput);
document.addEventListener('mouseup', sendOutput);
document.addEventListener('click', sendOutput);
document.addEventListener('dblclick', sendOutput);
//
if (document.addEventListener) {
    document.addEventListener("mousewheel", sendOutput, false); // IE9, Chrome, Safari, Opera
    document.addEventListener("DOMMouseScroll", sendOutput, false); // Firefox
} else {
    document.attachEvent("onmousewheel", sendOutput); // IE 6/7/8
}
//