kara-ryli/mouse-events.html

## mouse-events.html
<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
p      { font: normal normal 10px/15px sans-serif; margin: 0;}
div    { display: inline; float: left; height:300px;
	     overflow:auto; margin-right: 20px; width: 300px; }
#test  { background: #333; color: #FFF; line-height: 300px;
	     text-align: center;}
#clear { clear: both; padding-top: 10px; width: auto;
	     height: auto; float: none; display: block;}
	</style>
</head>
<body>
	<div id="test">Click Me</div>
	<div id="output"></div>
	<div id="clear"><button>Clear</button></div>
	<script>
var output = document.getElementById('output'),
    test = document.getElementById('test'),
    lastEvent;

test.onclick = test.onmousemove = test.onmouseover = test.onmouseout =
test.onmousedown = test.onmouseup = function(_e) {
	if (lastEvent === _e.type) { return;}
	lastEvent = _e.type;
	var p = document.createElement('p');
	p.appendChild(document.createTextNode(_e.type));
	output.appendChild(p);
};
document.getElementById('clear').onclick = function(_e) {
	var p;
	while(p = output.getElementsByTagName('p')[0]) {
		output.removeChild(p);
	}
};
	</script>
</body>
</html>
	<!DOCTYPE HTML>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
	p { font: normal normal 10px/15px sans-serif; margin: 0;}
	div { display: inline; float: left; height:300px;
	overflow:auto; margin-right: 20px; width: 300px; }
	#test { background: #333; color: #FFF; line-height: 300px;
	text-align: center;}
	#clear { clear: both; padding-top: 10px; width: auto;
	height: auto; float: none; display: block;}
	</style>
	</head>
	<body>
	<div id="test">Click Me</div>
	<div id="output"></div>
	<div id="clear"><button>Clear</button></div>
	<script>
	var output = document.getElementById('output'),
	test = document.getElementById('test'),
	lastEvent;

	test.onclick = test.onmousemove = test.onmouseover = test.onmouseout =
	test.onmousedown = test.onmouseup = function(_e) {
	if (lastEvent === _e.type) { return;}
	lastEvent = _e.type;
	var p = document.createElement('p');
	p.appendChild(document.createTextNode(_e.type));
	output.appendChild(p);
	};
	document.getElementById('clear').onclick = function(_e) {
	var p;
	while(p = output.getElementsByTagName('p')[0]) {
	output.removeChild(p);
	}
	};
	</script>
	</body>
	</html>