イベントモジュールの進化

本編ではJavascriptのイベントメカニズムを振り返ってみます.同時に最小の関数から最後の完全な機能を持つ強力なイベントモジュールについて書き始める.記述の都合上、応答関数/コールバック関数/イベントListener/イベントhandlerをイベントhandlerと呼びます.
まず、ページにイベントを追加する方法を見てください.
1,直接JSコードをHTMLに書きます.

   
   
   
   

    
    
    
    <
    
    
    
    div 
    
    
    
    onclick
    
    
    
    ="alert(4);"
    
    
    
    >
    
    
    
    Div1 Element
    
    
    
    
    
    
    
    div
    
    
    
    >
   
   
   
   

HTML Elementの要素自体は多くのonXXX属性を持っています.JSコードを値付けすればいいです.オンXXXに与えられた文字列は応答関数の関数として扱われる(FunctionBody).たぶんこれは90年代の書き方です.JSコードを直接ホームページに書くのは普通です.その時のJSはあまり重要ではないかもしれません.検証や派手な効果をするだけです.
2,関数を定義して、html元素のonXXX属性を与えます.

   
   
   
   

    
    
    
    <
    
    
    
    script 
    
    
    
    type
    
    
    
    ="text/javascript"
    
    
    
    >
    
    
    
    
     
    
    
    
    function
    
    
    
     clk(){}

    
    
    
    
    
    
    
    script
    
    
    
    >
    
    
    
    

    
    
    
    <
    
    
    
    div 
    
    
    
    onclick
    
    
    
    ="clk()"
    
    
    
    >
    
    
    
    Div2 Element
    
    
    
    
    
    
    
    div
    
    
    
    >
   
   
   
   

関数clkを先に定義して、Oclick属性に値を付けます.これも前世紀90年代の流行の書き方です.第一の方式より良いのは、業務論理コードを一つの関数にカプセル化して、HTMLコードとJSコードを少し分離させて、第一の種類ほど緊密に結合することはありません.
3,element.onXXX方式を使う

   
   
   
   

    
    
    
    <
    
    
    
    div 
    
    
    
    id
    
    
    
    ="d3"
    
    
    
    >
    
    
    
    Div3 Element
    
    
    
    
    
    
    
    div
    
    
    
    >
    
    
    
    

    
    
    
    <
    
    
    
    script 
    
    
    
    type
    
    
    
    ="text/javascript"
    
    
    
    >
    
    
    
        
    
    
    
    
    var
    
    
    
     d3 
    
    
    
    =
    
    
    
     document.getElementById(
    
    
    
    '
    
    
    
    d3
    
    
    
    '
    
    
    
    );
    d3.onclick 
    
    
    
    =
    
    
    
     
    
    
    
    function
    
    
    
    (){    }

    
    
    
    
    
    
    
    script
    
    
    
    >
   
   
   
   

このような方式も初期の書き方であるが、JSとHTMLを完全に分離することができるというメリットがあり、HTML要素に追加のid属性(または他の要素オブジェクトを取得できるような方式)を提供する必要があるという前提がある.
4,addEvent ListenerまたはatachEventを使用する

   
   
   
   

    
    
    
    <
    
    
    
    div 
    
    
    
    id
    
    
    
    ="d4"
    
    
    
    >
    
    
    
    Div4 Element
    
    
    
    
    
    
    
    div
    
    
    
    >
    
    
    
    

    
    
    
    <
    
    
    
    script 
    
    
    
    type
    
    
    
    ="text/javascript"
    
    
    
    >
    
    
    
    

    
    
    
    var
    
    
    
     d4 
    
    
    
    =
    
    
    
     document.getElementById(
    
    
    
    '
    
    
    
    d4
    
    
    
    '
    
    
    
    );

    
    
    
    function
    
    
    
     clk(){alert(
    
    
    
    4
    
    
    
    )}

    
    
    
    if
    
    
    
    (d4.addEventListener){
d4.addEventListener(
    
    
    
    '
    
    
    
    click
    
    
    
    '
    
    
    
    ,clk,
    
    
    
    false
    
    
    
    );    
}

    
    
    
    if
    
    
    
    (d4.attachEvent){    
d4.attachEvent(
    
    
    
    '
    
    
    
    onclick
    
    
    
    '
    
    
    
    ,clk);
}

    
    
    
    
    
    
    
    script
    
    
    
    >
   
   
   
   

これは現在推奨されている方法で、前の2つの方法よりも機能が強く、要素に複数のイベントを追加することができます.イベントの泡が発生したり、捕獲されたりすることをサポートします.前の3つの方法はデフォルトでは泡が発生します.IE 6/7/8は依然として基準に従わずに独自のatachEventを使用しており、イベントキャプチャをサポートしていません.
はい、方式4を簡単に包装してください. 標準ブラウザとIEブラウザに対応しています.注意atachEventの最初のパラメータは「on」を追加する必要があります.addEvent Listenerの三つ目のパラメータはfalseであり、イベントの泡を表します.atachEventは第三のパラメータがありません.デフォルトでは泡が発生し、捕獲されません.

   
   
   
   

    
    
    
    /*
    
    
    
    *
 * 
 * @param {Object} el HTML Element
 * @param {Object} type     
 * @param {Object} fn   handler
 
    
    
    
    */
    
    
    
    

    
    
    
    function
    
    
    
     addEvent(el, type, fn){
    
    
    
    
    if
    
    
    
    (el.addEventListener){
        el.addEventListener(type, fn, 
    
    
    
    false
    
    
    
    );
    }
    
    
    
    else
    
    
    
    {
        el.attachEvent(
    
    
    
    '
    
    
    
    on
    
    
    
    '
    
    
    
     
    
    
    
    +
    
    
    
     type, fn);
    }
}
   
   
   
   

はい、このツール関数を使ってdocumentにクリックイベントを追加します.

   
   
   
   

    
    
    
    function
    
    
    
     handler(){
    alert(
    
    
    
    this
    
    
    
    );
    alert(arguments[
    
    
    
    0
    
    
    
    ]);
}
addEvent(document, 
    
    
    
    '
    
    
    
    click
    
    
    
    '
    
    
    
    , handler);
   
   
   
   

Firefoxなどの標準ブラウザでは、ページをクリックすると「[object HTMLDocument]」が表示されます.また、handlerのthisはdocument自身です.しかし、IE 6/7/8では、thisはwindowオブジェクトです.これは人を不快にさせて、改正のもとで標準のブラウザーと統一します.

   
   
   
   

    
    
    
    function
    
    
    
     addEvent(el, type, fn){
    
    
    
    
    if
    
    
    
    (el.addEventListener){
        el.addEventListener(type, fn, 
    
    
    
    false
    
    
    
    );
    }
    
    
    
    else
    
    
    
    {    
        el[
    
    
    
    '
    
    
    
    e
    
    
    
    '
    
    
    
     
    
    
    
    +
    
    
    
     fn] 
    
    
    
    =
    
    
    
     
    
    
    
    function
    
    
    
    (){
            fn.call(el, window.event);
        }
        el.attachEvent(
    
    
    
    '
    
    
    
    on
    
    
    
    '
    
    
    
    +
    
    
    
    type, el[
    
    
    
    '
    
    
    
    e
    
    
    
    '
    
    
    
    +
    
    
    
    fn]);
    }
}