jsの中でaddEvent Listener、atachEvent、removeEvent Listener、detachEventはIEとFFの異なった使い方にあります.

6441 ワード

FireFoxのaddEventListenerの使い方.
addEventListenerのパラメータは全部で三つあります.文法は以下の通りです.
element.addEvent Listener(type,listener,useCapture)
プロトタイプ:target.addEvent Listener(type,listener,useCapture);パラメータ:target:傍受対象;type:イベントの傍受listener:処理書
数を数えるuseCapture:傍受順序方式用途:あるイベントを傍受し、対応する操作を実行する.例えば、window.addEventListener(「load」、loadwindow()、false);傍受窓
ポートローディングは、ウィンドウローディング時に、loadWindow()関数を実行します.第三のパラメータを例に挙げて説明します.このパラメータはuseCaptureといい、つまりtrueまたはfalseであり、
傍受の順番を決める.例えば、傍受対象1はレイヤ1であり、傍受対象2はレイヤ2であり、レイヤ1はレイヤ2を含み、イベントを傍受してクリックする.レイヤー2をクリックすると、レイヤ1とレイヤ2が応答して、応答順が変化します.
useCaptureが決定しました.trueの場合は、ブラウザはCapture方式を使用して、まず下の階を実行します.すなわち、レイヤー1を処理してから、レイヤー2を処理します.falseの場合はBbbling方式です.
トップレベルの処理、すなわち、レイヤ2を処理して、レイヤ1を処理する.
htmlコード
<div id=「divmutest」<input type=「button」id=「btnutest」value=「se4.cn技術基地」/>
jsコード
window.onload=function(){document.getElement ById(「div test」).addEventListener(「click」,test 1,false);document.getElement ById
(「btnuutest」).addEvent Listener(「click」、test 2、false);}function test 1(){alert(「外層divトリガ」)}function test 2(){alert(「内層inputトリガ」)}
自分で体験してみてください.もしuserCaptureがtrueであればtest 1が触発されます.userCaptureがfalseであればtest 2が先に触発されます.
ここに一例を貼ります.この例はインターネットから来ています.
Dcument.getElemenntById.onclick=method 1;Dcument.getElemenntById.onclick=method 2;Dcument.getElemenntById.onclick=method 3;このように書くと、medhot 3だけが実行されます.
このように書く:var btn 1 Obj=document.getElemenntById(「btn 1」);object.atachEvent(イベント、function);btn 1 Obj.atachEvent(「onclick」、method 1)btn 1 Obj.atachEvent(「onclick」、method 2)btn 1 Obj.atachEvent(「onclick」、method 3)実行順序は、method 3->method 2->method 1です.
Mozillaシリーズであれば、この方法はサポートされておらず、addEvent Listenervar btn 1 Obj=document.getElement ById(「btn 1」)を使用する必要があります.element.addEvent Listener(type,listener,useCapture);btn 1 Obj.addEvent Listener(「click」、method 1、false);btn 1 Obj.addEvent Listener(「click」、method 2、false)btn 1 Obj.addEvent Listener(「click」、method 3、false)実行順序は、method 1->method 2->method 3です.
 
----------------my demo
//       

    //  IORI.addEvent(window,'load',test6);   

    //    IORI.addEvent(window,'load',test5);   

    //               

    function addEvent(node,type,listener){

        if(!IORI.isCompatible){return false;}

        if(!(node=$(node))) {return false;}

        

        if(node.addEventListener){

            //W3C      

            node.addEventListener(type,listener,false);

            return true;

        }

        else if(node.attachEvent){

                //MS IE    

                node.attachEvent('on'+type,listener)

                /*node['e'+type_]=listener;   

                node[type_]=function()   

                {                  

                    node['e'+type_](window.event);   

                }              

                node.attachEvent('on'+type_,node[type_]);  */

                return true;

        }

        

        //            

        return false; 

    }

    IORI.addEvent = addEvent;

    

    //       

    //   IORI.removeEvent(window,'load',test6);  

    function removeEvent(node,type,listener){

        if(!(node=$(node))){

            return false;    

        }    

        

        if(node.removeEventListener){

             //W3C    

            node.removeEventListener(type,listener,false);

            return true;

        }

        else if(node.detachEvent){

            node.detachEvent('on'+type,listener);

            return true;    

        }

        

        return false;

    }

    IORI.removeEvent = removeEvent;