JohnLukeBentley · March 16, 2018 07:07
diff --git a/events-demo.xhtml b/events-demo.xhtml
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 <head>
  <meta charset="utf-8" />
  <title>Events Demo</title>

  <style>
    /* <![CDATA[ */
    /* A comment */
      div {
        width: 200px;
        color: yellow;
      }
      #sidebar {
        background: repeating-linear-gradient(
          45deg,
          #606dbc,
          #606dbc 10px,
          #465298 10px,
          #465298 20px
        );
        height: 500px;
      }
      #searchPane {
        background-color: rgb(0, 120, 0, 0.5);
        height: 150px;
      }

      label { display: block;}
    /* ]]> */
  </style> 

  <script>
  /* <![CDATA[ */

  function searchPaneEventHandler(event) {

    var result = "";
    var currentElement = event.target;

    switch(event.type) {
      case "mouseover":
        result = "In Search Pane";
        currentElement.focus();
        break;
      case "mouseout":
        result = "Out of Search Pane";
        break;
      case "keypress":
        result = "Key " + event.key;
        if (event.key == "Escape") {
          currentElement.parentNode.removeChild(currentElement);
        }
        break;
      default:
        result = event.type;
    }
    document.getElementById('searchPaneEventStatus').childNodes[0].nodeValue = result;
   }

   function AddEventHandler(elementID, eventName) {
    document.getElementById(elementID).addEventListener(eventName, searchPaneEventHandler, true);
   }

  window.onload = function() {
    AddEventHandler('searchPane', 'mouseover');
    AddEventHandler('searchPane', 'mouseout');
    AddEventHandler('searchPane', 'keypress');
  }
  /* ]]> */
  </script>
 </head>
 <body>
  <h1>Events Demo</h1>
  <p>Instructions:</p>
  <ul>
    <li>Move mouse over the greenish "Search Pane".</li>
    <li>Press some alphabetics on your keyboard. Observe "Search Pane Event Status" below.</li>
    <li>Press escape.</li>
  </ul>
  <div id="sidebar">
    <div id="searchPane" tabindex="1">Search Pane</div>
    Sidebar
  </div>
  <label>Search Pane Event Status: <output id="searchPaneEventStatus">To be overwritten</output></label> 
 </body>
 </html>
	<!DOCTYPE html>
	<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<head>
	<meta charset="utf-8" />
	<title>Events Demo</title>

	<style>
	/* <![CDATA[ */
	/* A comment */
	div {
	width: 200px;
	color: yellow;
	}
	#sidebar {
	background: repeating-linear-gradient(
	45deg,
	#606dbc,
	#606dbc 10px,
	#465298 10px,
	#465298 20px
	);
	height: 500px;
	}
	#searchPane {
	background-color: rgb(0, 120, 0, 0.5);
	height: 150px;
	}

	label { display: block;}
	/* ]]> */
	</style>

	<script>
	/* <![CDATA[ */

	function searchPaneEventHandler(event) {

	var result = "";
	var currentElement = event.target;

	switch(event.type) {
	case "mouseover":
	result = "In Search Pane";
	currentElement.focus();
	break;
	case "mouseout":
	result = "Out of Search Pane";
	break;
	case "keypress":
	result = "Key " + event.key;
	if (event.key == "Escape") {
	currentElement.parentNode.removeChild(currentElement);
	}
	break;
	default:
	result = event.type;
	}
	document.getElementById('searchPaneEventStatus').childNodes[0].nodeValue = result;
	}

	function AddEventHandler(elementID, eventName) {
	document.getElementById(elementID).addEventListener(eventName, searchPaneEventHandler, true);
	}

	window.onload = function() {
	AddEventHandler('searchPane', 'mouseover');
	AddEventHandler('searchPane', 'mouseout');
	AddEventHandler('searchPane', 'keypress');
	}
	/* ]]> */
	</script>
	</head>
	<body>
	<h1>Events Demo</h1>
	<p>Instructions:</p>
	<ul>
	<li>Move mouse over the greenish "Search Pane".</li>
	<li>Press some alphabetics on your keyboard. Observe "Search Pane Event Status" below.</li>
	<li>Press escape.</li>
	</ul>
	<div id="sidebar">
	<div id="searchPane" tabindex="1">Search Pane</div>
	Sidebar
	</div>
	<label>Search Pane Event Status: <output id="searchPaneEventStatus">To be overwritten</output></label>
	</body>
	</html>