Nicholas C. Zakas「Event delegation in JavaScript」

NCZOnline 2009.6.30のブログエントリ

Event delegation in JavaScript

あまり良く分かっていないEvent Delegationのチュートリアル記事。
例が分かりやすかった

気になるところだけ斜め読み

• 歴史
  • Netscapeのイベントモデルは、capuringモデル
  • IEのイベントモデルは、bubblingモデル
  • W3CのDOMでは、caputuring/bubblingモデル両方仕様に盛り込まれた
• addEventLisenterの三番目の引数
  • trueだとcaputuringモデル
  • falseだと、bubblingモデル
• event delegation
  • bubblingモデルを使うのがポイント
    • ieのattachEvent()はbubblingモデルだし
    • bubblingモデルで伝播するイベントは、マウスとキーボード関連のイベントのみ
      • よく使うイベントはそろってるので困らない

document.onclick = function(event){
    //IE doesn't pass in the event object
    event = event || window.event;
    
    //IE uses srcElement as the target
    var target = event.target || event.srcElement;    

    switch(target.id){
        case "help-btn":
            openHelp();
            break;
        case "save-btn":
            saveDocument();
            break;
        case "undo-btn":
            undoChanges();
            break;
        //others?
    }
};

• documentオブジェクトへイベントをセット
• イベントオブジェクトと、イベントが発生したエレメントを取得
• あとはイベントが発生したオブジェクトが何であるかによって、処理を割り当ててく。
• caputuingモデルでevent delegation
  • 無理じゃないけどIE（6-8)では動かない
  • （補足）ie9ではサポートされてる
    • DOM Level 3 Events support in IE9 - IEBlog - Site Home - MSDN Blogs