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
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;