--- a/src/css/screen.css	Sun Dec 02 03:05:51 2012 -0800
+++ b/src/css/screen.css	Mon Dec 03 15:50:06 2012 -0800
@@ -89,4 +89,8 @@
 .placeholder {
 	color:#999;
 	font-style:italic;
-}
\ No newline at end of file
+}
+
+#eventslist li {
+	margin-bottom:0.6em;
+}

--- a/src/indie-ui-events.html	Sun Dec 02 03:05:51 2012 -0800
+++ b/src/indie-ui-events.html	Mon Dec 03 15:50:06 2012 -0800
@@ -4,6 +4,7 @@
 		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
 		<title>IndieUI: Events 1.0</title>
 		<link href="./css/screen.css" rel="stylesheet" type="text/css">
+		<script type="text/javascript" src="./js/utils.js"></script>
 		
 		<!-- 
       === NOTA BENE ===
@@ -98,11 +99,6 @@
 			<p class="placeholder">placeholder for remaining intro explaining background, event registration (addEventListener) versus origination (event.target defined via ~@ui-actions)</p>
 		</section>
 		
-		<section id="eventslist">
-			<h2>Events List (alphabetical)</h2>
-			<p class="placeholder">placeholder for alphabetical list of event types with short descriptions</p>
-		</section>
-		
 		<!-- :::::::::::::::::::: UI Request Event Interfaces :::::::::::::::::::: -->
 		<section id="RequestEvents">
 			<h2><abbr title="User Interface">UI</abbr> Request Events</h2>
@@ -521,6 +517,12 @@
 		</section>
 		<!-- :::::::::::::::::::: END Accessibility Event Interfaces :::::::::::::::::::: -->
 
+		<section id="eventslist">
+			<h2>Events List (alphabetical)</h2>
+			<div data-transform="listEvents"><!-- dynamically generates event list --></div>
+		</section>
+
+
 		<!--
 		ReSpec: Use @data-transform to reuse a JavaScript content formatter, and @data-oninclude to transform external content before inclusion.
 		<script type="text/javascript">function xmp(r, content) { return content.replace(/</g,'&lt;').replace(/>/g,'&gt;'); } </script>

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/js/utils.js	Mon Dec 03 15:50:06 2012 -0800
@@ -0,0 +1,26 @@
+
+function $$(selector, optContextElement){
+	var el = optContextElement || document;
+	return el.querySelectorAll(selector);
+}
+
+/* listEvents: alphabetically list of event listeners, generated from markup */
+function listEvents(r, content) {
+	var s = '';
+	var nodeList = $$('code.event')
+	var eventList = [];
+	for (index in nodeList) {
+		var title = nodeList[index].innerText;
+		if ($$('#'+title).length) eventList.push(title);
+	}
+	s += '<ul>'
+	for (index in eventList.sort()){
+		var title = eventList[index];
+		var description = '';
+		var els = $$('#'+title+'+dd>p'); // get the paragraph children of the dd that follows the dt event element.
+		if (els.length) description = els[0].innerText; // use its text value as the short description
+		s += '<li><a href="#' +title+ '">' +title+ '</a>: ' +description+ '</li>';
+	}
+	s += '</ul>'
+	return content + s;
+}