events/demo/uievents.html

<!DOCTYPE HTML>
<title>Events</title>
<style>
  #eventarea {
    background-color: blue;
    height: 9em;
    overflow: scroll;
  }
  li code:first-child {
    font-weight: bolder;
  }
</style>

<div id=eventarea tabindex=0>

  agewagea g awtg at gages w43t 434 gsa re tag bw t4 4q4tg4 t4wa
  3gv enw 4a g4w t4wa aegfe rr r agewagea g awtg at gages w43t 434 gsa
  re tag bw t4 4q4tg4 t4wad 3gv enw 4a g4w t4wa aegfe rr ragewagea g
  awtg at gages w43t 434 gsa re tag bw t4 4q4tg4 t4wa 3gv enw 4a g4w.

  <p>awtg at gages w43t 434 gsa re tag bw t4 4q4tg4 t4wa 3gv enw 4a g4w
  t4wa aegfe rr ragewagea g awtg at gages w43t 434 gsa re tag bw t4
  4q4tg4 t4wa 3gv enw 4a g4w t4wa aegfe rr ragewagea g awtg at gages
  w43t 434 gsa re tag bw t4 4q4tg4 t4wa 3gv enw 4a g4w t4wa aegfe rr

  <p><input pattern="[^0-9]+"> <select><option>a<option>b</select>

  <p>t4wa aegfe rr ragewagea g awtg at gages w43t 434 gsa re tag bw t4
  4q4tg4 t4wa 3gv enw 4a g4w t4wa aegfe rr ragewagea g awtg at gages
  re tag bw t4 4q4tg4 t4wa3gv enw 4a g4w t4wa aegfe rr r.
</div>

<ul id=events></ul>

<script>
  var target = document.getElementById ('eventarea');
  var results = document.getElementById ('events');

  if (target.addEventListener) {
    var add = function (event, code) {
      target.addEventListener (event, code, false);
    }; // add
  } else if (target.attachEvent) {
    var add = function (event, code) {
      target.attachEvent ('on' + event, code);
    }; // add
  }

  var lastEvent;
  var handleEvent = function (event) {
    var ev = event || window.event;
    if (ev.type == lastEvent) return;
    lastEvent = ev.type;
    var li = document.createElement ('li');
    li.appendChild (document.createElement ('code')).appendChild (document.createTextNode (ev.type));
    li.appendChild (document.createTextNode (' '));
    for (var n in ev) {
      if (ev[n] instanceof Function) continue;
      if (/^(?:[0-9A-Z_]+|type|target|currentTarget)$/.test (n)) continue;
      li.appendChild (document.createElement ('code')).appendChild (document.createTextNode (n));
      li.appendChild (document.createTextNode (' '));
      li.appendChild (document.createElement ('code')).appendChild (document.createTextNode (ev[n]));
      li.appendChild (document.createTextNode ('; '));
    }
    results.insertBefore (li, results.firstChild);
  };

  for (var e in {
    'click':0, 'dblclick':0,
    'mouseover':0, 'mouseenter':0, 'mousedown':0, 'mousemove':0, 
    'mouseup':0, 'mouseout':0, 'mouseleave': 0,
    'wheel':0,
    'touchstart':0, 'touchmove':0, 'touchend':0, 'touchcancel':0,
    'dragstart':0, 'dragenter':0, 'dragover':0, 'drop':0, 'dragleave':0,
    
    'focus':0, 'DOMFocusIn':0, 'focusin':0, 
    'blur':0, 'DOMFocusOut':0, 'focusout':0,
    'DOMActivate':0, 'select':0,
    'contextmenu':0,

    'keydown':0, 'keypress':0, 'keyup':0,
    'textinput':0,
    'compositionstart':0, 'compositionupdate':0, 'compositionend':0,

    'scroll':0,

    'input':0, 'change':0, 'forminput':0, 'formchange':0,
    'invalid':0,

    'dummry':0
  }) {
    add (e, handleEvent);
  }
</script>
1	wakaba	1.1	<!DOCTYPE HTML>
2			<title>Events</title>
3			<style>
4			#eventarea {
5			background-color: blue;
6			height: 9em;
7			overflow: scroll;
8			}
9			li code:first-child {
10			font-weight: bolder;
11			}
12			</style>
13
14			<div id=eventarea tabindex=0>
15
16			agewagea g awtg at gages w43t 434 gsa re tag bw t4 4q4tg4 t4wa
17			3gv enw 4a g4w t4wa aegfe rr r agewagea g awtg at gages w43t 434 gsa
18			re tag bw t4 4q4tg4 t4wad 3gv enw 4a g4w t4wa aegfe rr ragewagea g
19			awtg at gages w43t 434 gsa re tag bw t4 4q4tg4 t4wa 3gv enw 4a g4w.
20
21			<p>awtg at gages w43t 434 gsa re tag bw t4 4q4tg4 t4wa 3gv enw 4a g4w
22			t4wa aegfe rr ragewagea g awtg at gages w43t 434 gsa re tag bw t4
23			4q4tg4 t4wa 3gv enw 4a g4w t4wa aegfe rr ragewagea g awtg at gages
24			w43t 434 gsa re tag bw t4 4q4tg4 t4wa 3gv enw 4a g4w t4wa aegfe rr
25
26			<p><input pattern="[^0-9]+"> <select><option>a<option>b</select>
27
28			<p>t4wa aegfe rr ragewagea g awtg at gages w43t 434 gsa re tag bw t4
29			4q4tg4 t4wa 3gv enw 4a g4w t4wa aegfe rr ragewagea g awtg at gages
30			re tag bw t4 4q4tg4 t4wa3gv enw 4a g4w t4wa aegfe rr r.
31			</div>
32
33			<ul id=events></ul>
34
35			<script>
36			var target = document.getElementById ('eventarea');
37			var results = document.getElementById ('events');
38
39			if (target.addEventListener) {
40			var add = function (event, code) {
41			target.addEventListener (event, code, false);
42			}; // add
43			} else if (target.attachEvent) {
44			var add = function (event, code) {
45			target.attachEvent ('on' + event, code);
46			}; // add
47			}
48
49			var lastEvent;
50			var handleEvent = function (event) {
51			var ev = event \|\| window.event;
52			if (ev.type == lastEvent) return;
53			lastEvent = ev.type;
54			var li = document.createElement ('li');
55			li.appendChild (document.createElement ('code')).appendChild (document.createTextNode (ev.type));
56			li.appendChild (document.createTextNode (' '));
57			for (var n in ev) {
58			if (ev[n] instanceof Function) continue;
59			if (/^(?:[0-9A-Z_]+\|type\|target\|currentTarget)$/.test (n)) continue;
60			li.appendChild (document.createElement ('code')).appendChild (document.createTextNode (n));
61			li.appendChild (document.createTextNode (' '));
62			li.appendChild (document.createElement ('code')).appendChild (document.createTextNode (ev[n]));
63			li.appendChild (document.createTextNode ('; '));
64			}
65			results.insertBefore (li, results.firstChild);
66			};
67
68			for (var e in {
69			'click':0, 'dblclick':0,
70			'mouseover':0, 'mouseenter':0, 'mousedown':0, 'mousemove':0,
71			'mouseup':0, 'mouseout':0, 'mouseleave': 0,
72			'wheel':0,
73			'touchstart':0, 'touchmove':0, 'touchend':0, 'touchcancel':0,
74			'dragstart':0, 'dragenter':0, 'dragover':0, 'drop':0, 'dragleave':0,
75
76			'focus':0, 'DOMFocusIn':0, 'focusin':0,
77			'blur':0, 'DOMFocusOut':0, 'focusout':0,
78			'DOMActivate':0, 'select':0,
79			'contextmenu':0,
80
81			'keydown':0, 'keypress':0, 'keyup':0,
82			'textinput':0,
83			'compositionstart':0, 'compositionupdate':0, 'compositionend':0,
84
85			'scroll':0,
86
87			'input':0, 'change':0, 'forminput':0, 'formchange':0,
88			'invalid':0,
89
90			'dummry':0
91			}) {
92			add (e, handleEvent);
93			}
94			</script>