ページのイベントハンドラ
ページのイベントハンドラについてご紹介しています。
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>