Web Browser UI Events
To Javascript



Why?

Even though some events to Javascript are "standardized", the list of events shown for the same user action may differ quite a bit between different browser models and versions running on different platforms. Some events (for example gestureend) are not standardized on many browsers. And conversion of events (for example a touchmove becoming a scroll) is defined pretty loosely and may differ in detail from one browser to another.

Web pages intended to behave similarly on many different devices need to thoroughly understand and allow for these differences. Perhaps for example everything can be done with only events common to all browsers, and other events can be ignored.

What's Shown

The series of events to Javascript caused by some user action (touch, move mouse, click, etc.) will be collected up, then shown all at once after a short period with no further events. The sequence of events is shown exactly as it actually occurred when there were no responses at all. (In other words, the possibility of the sequence of events being modified by something like preventDefault() or stopPropagation() is not shown.)

Repeated sequences of some frequent events (ex: touchmove or mousemove) will be "collapsed" so the shown list of events isn't quite so long. The first event will be named normally, and succeeding repeated events will be noted simply by a dot (.). If detail is sometimes shown for that type of event, it will only be shown for the last event. Finally, a comma (,) will end the sequence. For example a single touchstart event will be shown something like touchstart(scrollX=N,scrollY=N), , while a series of three touchmove events will be shown something like touchmove..(scrollX=N,scrollY=N), , with the (scroll...) from the last touchmove event.

Warning (Anti-Loop)

To avoid possible endless looping, events will occasionally not cause a message. In particular, collection of additional events will be suppressed while events are being shown, and for a little while afterward. Thus there will not be an event shown for the click or key that dismisses the notice. Test carefully multiple times with different timings. Be careful about over-interpreting a single result.

Test Link

Click on this link to see the sequence of events. (This hyperlink doesn't actually go anywhere. Use it to find out the sequence of events when you click on a real link.)

Related Links

(Because of interference from the event tracing, you may have to click on these links more than once.)

Web Browser Page-Level Events In Javascript

Web Device Display Dimensions

Web Device Display Dimensions - Constrained Viewport

CSS Media Queries - Alternative

Context Links

Other pages about fiddling with computers

Website "home"