JavaScript入門講座

Home > ページのイベントハンドラ

ページのイベントハンドラ

ページのイベントハンドラについてご紹介しています。

loadイベント

loadイベントはページや画像が読み込まれた後に発生します。


<script type="text/javascript">
    window.onload = function(){
	window.alert('loadイベント');
    }
</script>
						

unloadイベント

unloadイベントはページを更新したとき、または別のページに移動したときに発生します。

以下のサンプルではリンクをクリックしてページを移動する際に警告メッセージが表示されます。


<script type="text/javascript">
    window.onunload = function(){
	window.alert('unloadイベント');
    }
</script>

<a href="http://yahoo.co.jp/" rel="nofollow" title="Yahoo!">Yahoo!</a>
						

abortイベント

abortイベントは画像の読み込みがキャンセルれたときに発生します。


<script type="text/javascript">
    window.onabort = function(){
	window.alert('abortイベント');
    }
</script>
						

resizeイベント

resizeイベントは対象のサイズを変更したときに発生します。

以下のサンプルではウィンドウのサイズを変更した際に警告メッセージが表示されます。


<script type="text/javascript">
    window.onresize = function(){
	window.alert('resizeイベント');
    }
</script>
						

scrollイベント

resizeイベントは対象のサイズを変更したときに発生します。


<script type="text/javascript">
    window.onscroll = function(){
	window.alert('scrollイベント');
    }
</script>
						

contextmenuイベント

contextmenuイベントはコンテキストメニューが表示されるときに発生します。

以下のサンプルでは画面を右クリックすると警告メッセージが表示されます。


<body oncontextmenu="alert('contextmenuイベント');return false;">
</body>