JS - Events - mouse and keys

by Kyle Pennell

HTML

<h1>Hi</h1>

<p class="mouse">Mouse information...</p>
<p class="key">Key information...</p>

JavaScript

var mouseEl = document.querySelector("p.mouse");

document.addEventListener('mousemove', function(e) {
    var html = "<ul>";
    html += "<li>x:" + e.screenX + " y:" + e.screenY + "</li>";
    html += "<li>x:" + e.pageX + " y:" + e.pageY + "</li>";
    html += "<li>x:" + e.clientX + " y:" + e.clientX + "</li>";
    html += "</ul>";
    
    mouseEl.innerHTML = html;
});

var keyEl = document.querySelector("p.key");
document.addEventListener('keyup', function(e) {
   
    var html = "<p>";
    html += "Key pressed: " + String.fromCharCode(e.keyCode);
    html += "</p>"
    
    keyEl.innerHTML = html;
    
});