Skip to content

Instantly share code, notes, and snippets.

@abrom

abrom/index.html

Created March 24, 2020 06:03
Show Gist options
  • Save abrom/04f770f0ba014efb6ff65d4390edcf8f to your computer and use it in GitHub Desktop.
Save abrom/04f770f0ba014efb6ff65d4390edcf8f to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/quxomif
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body style="display: flex">
<canvas id="canvas" width='800' height='800' style="border: 1px solid black; display: inline-block"></canvas>
<div id="log" style="border: 1px solid green; width: 800px; height: 800px; display: inline-block; overflow: hidden"></div>
<script type="text/javascript">
var events = ["abort", "afterprint", "animationend", "animationiteration", "animationstart", "beforeprint", "beforeunload", "blur", "canplay", "canplaythrough", "change", "click", "contextmenu", "copy", "cut", "dblclick", "drag", "dragend", "dragenter", "dragleave", "dragover", "dragstart", "drop", "durationchange", "ended", "error", "focus", "focusin", "focusout", "fullscreenchange", "fullscreenerror", "hashchange", "input", "invalid", "keydown", "keypress", "keyup", "load", "loadeddata", "loadedmetadata", "loadstart", "message", "mousedown", "mouseenter", "mouseleave", "mousemove", "mouseover", "mouseout", "mouseup", "mousewheel", "offline", "online", "open", "pagehide", "pageshow", "paste", "pause", "play", "playing", "popstate", "progress", "ratechange", "resize", "reset", "scroll", "search", "seeked", "seeking", "select", "show", "stalled", "storage", "submit", "suspend", "timeupdate", "toggle", "touchcancel", "touchend", "touchmove", "touchstart", "transitionend", "unload", "volumechange", "waiting", "wheel"];
var canvas = document.getElementById("canvas");
var log = document.getElementById("log");
var handler = function(event) {
var node = document.createElement("div");
node.innerText = "Received: " + event.type;
if (log.childNodes.length > 50) {
log.removeChild(log.childNodes[50]);
}
log.insertBefore(node, log.childNodes[0]);
}
for (var i = 0; i < events.length; i++) {
canvas.addEventListener(events[i], handler);
}
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body style="display: flex">
<canvas id="canvas" width='800' height='800' style="border: 1px solid black; display: inline-block"></canvas>
<div id="log" style="border: 1px solid green; width: 800px; height: 800px; display: inline-block; overflow: hidden"></div>
<script type="text/javascript">
var events = ["abort", "afterprint", "animationend", "animationiteration", "animationstart", "beforeprint", "beforeunload", "blur", "canplay", "canplaythrough", "change", "click", "contextmenu", "copy", "cut", "dblclick", "drag", "dragend", "dragenter", "dragleave", "dragover", "dragstart", "drop", "durationchange", "ended", "error", "focus", "focusin", "focusout", "fullscreenchange", "fullscreenerror", "hashchange", "input", "invalid", "keydown", "keypress", "keyup", "load", "loadeddata", "loadedmetadata", "loadstart", "message", "mousedown", "mouseenter", "mouseleave", "mousemove", "mouseover", "mouseout", "mouseup", "mousewheel", "offline", "online", "open", "pagehide", "pageshow", "paste", "pause", "play", "playing", "popstate", "progress", "ratechange", "resize", "reset", "scroll", "search", "seeked", "seeking", "select", "show", "stalled", "storage", "submit", "suspend", "timeupdate", "toggle", "touchcancel", "touchend", "touchmove", "touchstart", "transitionend", "unload", "volumechange", "waiting", "wheel"];
var canvas = document.getElementById("canvas");
var log = document.getElementById("log");
var handler = function(event) {
var node = document.createElement("div");
node.innerText = "Received: " + event.type;
if (log.childNodes.length > 50) {
log.removeChild(log.childNodes[50]);
}
log.insertBefore(node, log.childNodes[0]);
}
for (var i = 0; i < events.length; i++) {
canvas.addEventListener(events[i], handler);
}
<\/script>
</body>
</html>
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment