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	<!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>