Because sometimes we don't understand what's going on with DOM events (even more on mobiles), here's an HTML page to test and understand things.
You just have to save it as an HTML file and load it in your browser (by drag-n-droping it for example). At the end of this file there's a list of events that are bypassed to avoid generating a lot of output. You can add/remove events from this list, based on what you want to test. And, of course, you can add/remove HTML tags (just after the <body> tag): add a button, a select, anything you need so you can understand more deeply how DOM events are triggered when interacting with a web page 🦄
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>Event testing.</title> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w==" crossorigin="anonymous" /> | |
| <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script> | |
| <style> | |
| * { | |
| box-sizing: border-box; | |
| } | |
| html, body { | |
| height: 100%; | |
| } | |
| body { | |
| padding: 1em; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <input id="input" type="text" autofocus> | |
| <script> | |
| // https://stackoverflow.com/a/11616993/4112863 | |
| function safeStringify (obj, indent = 2) | |
| { | |
| let cache = [] | |
| const retVal = JSON.stringify( | |
| obj, | |
| (key, value) => | |
| typeof value === "object" && value !== null | |
| ? cache.includes(value) | |
| ? undefined // Duplicate reference found, discard key | |
| : cache.push(value) && value // Store value in our collection | |
| : value, | |
| indent | |
| ); | |
| cache = null | |
| return retVal | |
| } | |
| // https://stackoverflow.com/a/7467863/4112863 | |
| function nl2br (str) | |
| { | |
| return (str + '').replace( | |
| /([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, | |
| '$1<br>$2' | |
| ) | |
| } | |
| // https://stackoverflow.com/a/10474157/4112863 | |
| function space2nbsp (str) | |
| { | |
| return str.replace(/ /g, '\u00a0') | |
| } | |
| /** | |
| * @param {String, Object} message | |
| * @returns {void} | |
| */ | |
| function debug (message) | |
| { | |
| if (typeof message != 'string') { | |
| message = space2nbsp( | |
| nl2br( | |
| safeStringify(message) | |
| ) | |
| ) | |
| } | |
| $('#debugConsole').append(`${message}<br>`) | |
| .scrollTop($('#debugConsole')[0].scrollHeight) | |
| } | |
| /** | |
| * @param {Object} handlers | |
| * @param {Array} bypass | |
| * @returns {void} | |
| */ | |
| function initialize (handlers = {}, bypass = []) | |
| { | |
| $('<div>').attr('id', 'debugConsole') | |
| .css({ | |
| width: '100%', | |
| height: '50%', | |
| backgroundColor: 'crimson', | |
| color: 'white', | |
| fontWeight: 'bold', | |
| position: 'absolute', | |
| left: 0, | |
| bottom: 0, | |
| border: '1em solid crimson', | |
| overflowY: 'auto', | |
| fontFamily: 'monospace', | |
| }) | |
| .appendTo($('body')) | |
| const createEventHandler = name => { | |
| return event => { | |
| debug(name) | |
| if (name in handlers) { | |
| handlers[name](name, event) | |
| } | |
| } | |
| } | |
| Object.keys(window).forEach(key => { | |
| if (/^on/.test(key)) { | |
| const name = key.slice(2) | |
| if (bypass.includes(name)) { | |
| return | |
| } | |
| $(window).on(name, createEventHandler(name)) | |
| $('#debugConsole').on(name, event => { | |
| event.stopImmediatePropagation() | |
| }) | |
| } | |
| }); | |
| ['focusin', 'focusout', 'focus', 'blur'].forEach(name => { | |
| $('#input').on(name, createEventHandler(name)) | |
| }) | |
| } | |
| // Change these values according to your needs. These events are bypassed by | |
| // default because they generate a LOT of output. | |
| const bypass = [ | |
| 'devicemotion', | |
| 'deviceorientation', | |
| 'deviceorientationabsolute', | |
| 'gotpointercapture', | |
| 'load', | |
| 'lostpointercapture', | |
| 'mousemove', | |
| 'mouseout', | |
| 'mouseover', | |
| 'mousewheel', | |
| 'pageshow', | |
| 'pointerrawupdate', | |
| 'wheel', | |
| ] | |
| const handlers = { | |
| keydown: (name, event) => { | |
| debug(`>>> ${event.code}`) | |
| debug(`>>> ${event.keyCode}`) | |
| }, | |
| input: (name, event) => { | |
| debug(`>>> ${$('#input').val()}`) | |
| } | |
| } | |
| initialize(handlers, bypass) | |
| </script> | |
| </body> | |
| </html> |
Top comments (0)