読者です 読者をやめる 読者になる 読者になる

以下斜め読んだ内容

pseudo translation of useful posts, book reviews, remarks,etc. twitter: feeddict

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