
<?php
    while (@ob_end_flush());
?> 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
a.btn { text-decoration: none;}
a.btn:hover { text-decoration: underline; }
</style>

<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.2/dojo/dojo.xd.js"></script>
<script type="text/javascript" src="jquery-1.2.3.min.js"></script>
<script type="text/javascript">
// 手抜きして参照を設定する
function MyEventDispatcher(eventTable)
{
    this.eventTable_ = eventTable || {};
}
// 手抜きして参照を設定する
MyEventDispatcher.prototype.setEventTable = function(eventTable)
{
    this.eventTable_ = eventTable;
};
MyEventDispatcher.prototype.dispatch = function(eventId, event, node)
{
    if (!event) event = window.event;
    // console.debug(event);
    // return this.eventTable_[eventId](event, node);
    return (this.eventTable_[eventId] || this.defaultFunc)(event, node);
};
MyEventDispatcher.prototype.defaultFunc = function()
{
    alert('まだイベントが設定されてないかも');
    return false;
};
</script>

<script>
// 今回のイベントハンドラ
function ChangeBgColorAndReload()
{
    alert('再読み込みします。');
    document.getElementById('body').style.backgroundColor = 'black';
    window.setTimeout(function(){
        location.reload();
    }, 100);
}

// dojoイベントハンドラ設定
dojo.addOnLoad(function(){
    dojo.connect(dojo.byId('btnForDojo'), 'onclick', function(event){
        dojo.stopEvent(event);
        ChangeBgColorAndReload();
    });
});

// jQueryイベントハンドラ設定
$('#btnForJquery').ready(function(){
    $('#btnForJquery').click(function(){
        ChangeBgColorAndReload();
    });
});

function AddEventHandler(eventId)
{
    var eventTable = {
        btnForJquery2_click: function(){
            $('#btnForJquery2').click(function(){
                ChangeBgColorAndReload();
            });
        }
    };
    eventTable[eventId] && eventTable[eventId]();
}

// MyEventDispatcher初期化
var theEventDispatcher = new MyEventDispatcher({
    btnForOnclick_onclick: function(event, node){
        // ここでDOM構築が終わったかどうかを確認しても良い
        ChangeBgColorAndReload();
        return false;
    }
});
// 初期化。イベントハンドラはあとで設定
var lazyEventDispatcher = new MyEventDispatcher();

window.onload = function(){
    document.getElementById('body').style.backgroundColor = 'white';
    document.getElementById('onloaded').innerHTML = 'onloadイベントも呼ばれました。';
};
</script>
</head>

<body id="body" style="background-color: lightblue;">

<p>
イベントが正常に設定されていれば、クリック後alertダイアログが出てから再読込されます。
</p>

<ul style="width:90%; height:200px; border: solid 1px;">
    <li><a class="btn" href="index.php" id="btnForDojo">dojo toolkitでaddOnLoadで設定<br />
        →ページ読み込み中 (背景水色) にクリックするとイベントハンドラが実行されない</a>
    <li><a class="btn" href="index.php" id="btnForJquery">jqueryのready()で設定<br />
        →ページ読み込み中 (背景水色) にクリックするとイベントハンドラが実行されない</a>
    <li><a class="btn" href="index.php" id="btnForJquery2">jqueryでhtml直下で設定<br />
        →ページ読み込み中 (背景水色) にクリックしても動作する</a>
    <script type="text/javascript"><!--
        AddEventHandler('btnForJquery2_click');
    // -->
    </script>
    <li><a class="btn" href="index.php" onclick="return theEventDispatcher.dispatch('btnForOnclick_onclick', event, this);">onclickで設定<br />
        →ページ読み込み中 (背景水色) にクリックしても動作する</a>
    <li><a class="btn" href="index.php" onclick="return lazyEventDispatcher.dispatch('btnForOnclickLazy_onclick', event, this);">onclickで設定<br />
        →ページ読み込み中 (背景水色) にクリックしたら別の動作をする</a>
</ul>

<p>
この次で3秒待つ... (3秒経ってから表示されるはず)
<?php 
sleep(3); 
?>
3秒経った。
</p>


<?php
    // キャッシュを (なるべく) 引かないように
    $rand = '?' . mt_rand(0, 10000);
    $img = 'slowimg.php' . $rand;
    $js = 'slowscript.php' . $rand;
?>

読み込みに3秒掛かるimg読み込み (他の読み込みは並行)<br/>
<img src="<?php echo $img; ?>"/>

<div>imgとjsの間</div>

読み込みに3秒掛かるjs。この先の表示は停止<br/>
<script src="<?php echo $js; ?>"></script>

<p>
<b>最後の方のhtml</b><br/>
<span id="onloaded">&nbsp;</span>
</p>

<a href="http://nonn-et-twk.net/twk/">twk</a>


<script type="text/javascript">
lazyEventDispatcher.setEventTable({
    btnForOnclickLazy_onclick: function(event, node){
        ChangeBgColorAndReload();
        return false;
    }
}); // setEventTable
</script>

</body>
</html>