Skip to content

Instantly share code, notes, and snippets.

@JohnLukeBentley
Created March 16, 2018 07:07
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save JohnLukeBentley/3cf2f005de1d6c59e966478a304fb8a3 to your computer and use it in GitHub Desktop.
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment