イベントハンドラサンプルコード

JavaScript 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="Content-Script-Type" content="text/javascript">
	
		<title>Event sample</title>
	
		<script src="./event.js"></script>
	</head>
	<body>
		<p id="canvas">
			→白→赤→青→黄→緑→灰→<br>
			<button id="btnHello">hello</button>
		</p>

	</body>
</html>

event.js

'use strict';

(function () {
	// windowのonloadイベントハンドラ登録
	window.addEventListener('load', setEvent, false);
	
	// window.onloadの処理実体
	function setEvent(evt) {
		var btnHello = document.getElementById('btnHello');
		var canvas = document.getElementById('canvas');
		
		// クロージャ設定
		var rotateColor = (function () {
			var colorTbl = [ 'white', 'red', 'blue', 'yellow', 'green', 'gray'];
			var idx = 0;
			
			return function () {
				// canvasの背景色をローテーション設定
				idx = (idx + 1 < colorTbl.length) ? idx + 1: 0;
				canvas.style.backgroundColor = colorTbl[idx];
			};
		})();
		
		// btnHelloにイベントハンドラ設定
		btnHello.addEventListener('click', 
			function(){alert('おはよう御座います。');}, true);
		btnHello.addEventListener('click', 
			function(){alert('こんにちは。');}, true);
		btnHello.addEventListener('click', 
			function(){alert('念のため、こんばんはも。');}, true);
		
		// canvasにクリックイベントハンドラ設定
		canvas.addEventListener('click', rotateColor, false);
	}
})();