atechEventとaddEvent Listenerは違います.
5077 ワード
一、対応するブラウザのバージョンが違います.
atachEvent方法はIEに適用されます. addEvent Listener方法はFFに適用されます.
二、対象の事件が違う
atechEventのイベントバンドon addEvent Listenerのイベントはonを持ちません.
三、パラメータの個数が違います.
atch Event方法の2つのパラメータ:
最初のパラメータはイベント名です.
第二のパラメータは、イベント処理を受信する関数である.
addEvent Listenerには三つのパラメータがあります.
最初のパラメータはイベント名を表します.
第二のパラメータは、イベント処理を受信する関数を表します.
三番目のパラメータはbook値で、一般的にfalseです. 三つ目のパラメータはuseCaptureと言います.ブーメランの値です.true or falseです.もしtrueを送るなら、ブラウザはCapture方式を使います.falseはBbbblingです.特定の状況でしか影響がありません.通常はfalseと提案します.影響があるのはターゲット要素です.また同じイベント対応関数もありますので、図を見たら分かりやすいと思います.
この図に示すように、私の例は二層div要素があり、また、clickイベントが設定されています.一般的に、私が内層青色の元素でclickを行うと青要素のclickイベントがトリガされるだけでなく、赤色要素のclickイベントが同時にトリガされます.useCaptureというパラメータはこの時の二つのclickイベントの順序を制御することです.falseであれば、Bbblingを使用します.彼は内から外への流れです.だから、青色のclickイベントを先に実行して、赤色の元素のclickイベントを実行します.trueであれば、captureです.bubbilingとは反対に外からです.赤い元素のclickイベントを先に実行します.青い元素のclickイベントを実行します.二つの例を添付します.captureとbbbblingはこの二つのファイルの差だけがあります.この一つのパラメータは違っています.事件の発生順序は違っています.
もし違う層の元素が使うuseCaptureが違うなら?ターゲット要素として設定されたイベントを一番外側の要素から探し、ターゲット要素に到達してターゲット要素を実行した後、元の道を探して外に出ます.
四、イベントの実行の優先度が異なる
ここでマウスをクリックしてください. var out Div=document.getElemenntById(「outDiv」)var middleDiv=document.getElemenntById(「middleDiv」)var inDiv=document.getElemenntById(“inDiv”);var info=document.getElemenntById(「info」)out Div.addEvent Listener(「click」、function(){info.inners HTML+=「outDiv」+「}、false);middleDiv.addEvent Listener(「click」、function(){info.inners HTML+=「middleDiv」+「""、}、false);inDiv.addEvent Listener(「click」、function(){info.inners HTML+=「inDiv」+「}、false);上記は私達がテストしたコードです.infoの表示によってトリガーの順序を決定します.三つのaddEventListenerがあります.useCaptureのオプション値はtrueとfalseです.だから、2*2*2で、8つの異なるプログラムが得られます.全部falseの場合、トリガ順序はinDiv、middleDiv、outDivです.全部trueの場合、トリガ順序はoutDiv、middleDiv、inDivです.out Divはtrueで、他はfalseの時、トリガの順序は:outDiv、inDiv、middleDivです.middleDivはtrueで、他はfalseの時、トリガの順序はmiddleDiv、inDiv、outDivです.最終的には、trueのトリガ順序は常にfalseの前にあると結論した.複数がtrueである場合、外側のレイヤーのトリガは内側のレイヤーより先になる.複数がfalseである場合、内部層のトリガは、外部層よりも先になる.以下はすべてのコードを提供します.true、falseの値を変更してテストします.IEには適用されません.
atachEventバインディングの関数は、バインディングされていません.
まずボタンを押します.ボタンを押してから、このボタンにイベントを結びつけます.
<span class="string"style="line-height:1.5;border:none;カラー:菗0000 FF;>lt;span style=「[/color]」lt;span style="line-height:1.5;border:none;font-size:12 pt;「javascript」</spant>ボルトspant>ボルトspant>lt;span style="line-height:1.5;border:none;font-size:12 pt; type=</spant>lt;span class="string"style="line-height:1.5;border:none;カラー:菗0000 FF;>lt;span style=「[/color]」lt;span style="line-height:1.5;border:none;font-size:12 pt;「text/javascript」</spant>ボルトspant>ボルトspant>lt;span style="line-height:1.5;border:none;font-size:12 pt;>gt; &ボルトspant>ボルトligt;
<li style="border-style:none none sonid;border-left-width:3 px;border-left-カラー:rgb(108,226,108);list-style:decimal outside;line-height:14 px;lt;span style="line-height:1.5;border:none;font-size:12 pt;Dcument.getElement ById(</spangt;<span class="string"style="line-height:1.5;border:none;gt;gt;span style="」</spangt;</spangt;<span style=「line-height:1.5;border:none;カラー(0,0,0);font-size:12 pt;"gt;).atachEvent(</spangt;<span class="style="style="line-height:1.5;border:none;カラー:“>span style=”カラー:1.5「>」onclick"</spangt;</spangt;<span style="line-height:1.5;border:none;色彩r b(0,0,0);font-size:12 pt;gt;doIt; &ボルトspant>ボルトligt;
<li style="border-style:none none sonid;border-left-width:3 px;border-left-カラー:rgb(108,226,108);list-style:decimal outside;line-height:14 px;lt;span style="line-height:1.5;border:none;font-size:12 pt; このような処理を経て、doIt法の中のthisはbuttonを代表しませんが、使用します. Dcument.getElemenntById(「btn 4」).onclick=doIt時thisはbtnの代表的なbuttonを指しています. あとは Dcument.getElemenntById(「btn 4」).addEventListener(「click」,doSomething,false);これはthisを結合してもいいです.
最後にすべてのブラウザに対応するイベントの傍受方法を書きます.
//すべてのブラウザに対応するatachEventメソッド
atachEvent方法はIEに適用されます. addEvent Listener方法はFFに適用されます.
二、対象の事件が違う
atechEventのイベントバンドon addEvent Listenerのイベントはonを持ちません.
三、パラメータの個数が違います.
atch Event方法の2つのパラメータ:
最初のパラメータはイベント名です.
第二のパラメータは、イベント処理を受信する関数である.
addEvent Listenerには三つのパラメータがあります.
最初のパラメータはイベント名を表します.
第二のパラメータは、イベント処理を受信する関数を表します.
三番目のパラメータはbook値で、一般的にfalseです. 三つ目のパラメータはuseCaptureと言います.ブーメランの値です.true or falseです.もしtrueを送るなら、ブラウザはCapture方式を使います.falseはBbbblingです.特定の状況でしか影響がありません.通常はfalseと提案します.影響があるのはターゲット要素です.また同じイベント対応関数もありますので、図を見たら分かりやすいと思います.
この図に示すように、私の例は二層div要素があり、また、clickイベントが設定されています.一般的に、私が内層青色の元素でclickを行うと青要素のclickイベントがトリガされるだけでなく、赤色要素のclickイベントが同時にトリガされます.useCaptureというパラメータはこの時の二つのclickイベントの順序を制御することです.falseであれば、Bbblingを使用します.彼は内から外への流れです.だから、青色のclickイベントを先に実行して、赤色の元素のclickイベントを実行します.trueであれば、captureです.bubbilingとは反対に外からです.赤い元素のclickイベントを先に実行します.青い元素のclickイベントを実行します.二つの例を添付します.captureとbbbblingはこの二つのファイルの差だけがあります.この一つのパラメータは違っています.事件の発生順序は違っています.
もし違う層の元素が使うuseCaptureが違うなら?ターゲット要素として設定されたイベントを一番外側の要素から探し、ターゲット要素に到達してターゲット要素を実行した後、元の道を探して外に出ます.
四、イベントの実行の優先度が異なる
ここでマウスをクリックしてください. var out Div=document.getElemenntById(「outDiv」)var middleDiv=document.getElemenntById(「middleDiv」)var inDiv=document.getElemenntById(“inDiv”);var info=document.getElemenntById(「info」)out Div.addEvent Listener(「click」、function(){info.inners HTML+=「outDiv」+「}、false);middleDiv.addEvent Listener(「click」、function(){info.inners HTML+=「middleDiv」+「""、}、false);inDiv.addEvent Listener(「click」、function(){info.inners HTML+=「inDiv」+「}、false);上記は私達がテストしたコードです.infoの表示によってトリガーの順序を決定します.三つのaddEventListenerがあります.useCaptureのオプション値はtrueとfalseです.だから、2*2*2で、8つの異なるプログラムが得られます.全部falseの場合、トリガ順序はinDiv、middleDiv、outDivです.全部trueの場合、トリガ順序はoutDiv、middleDiv、inDivです.out Divはtrueで、他はfalseの時、トリガの順序は:outDiv、inDiv、middleDivです.middleDivはtrueで、他はfalseの時、トリガの順序はmiddleDiv、inDiv、outDivです.最終的には、trueのトリガ順序は常にfalseの前にあると結論した.複数がtrueである場合、外側のレイヤーのトリガは内側のレイヤーより先になる.複数がfalseである場合、内部層のトリガは、外部層よりも先になる.以下はすべてのコードを提供します.true、falseの値を変更してテストします.IEには適用されません.
Var btn1Obj=document.getElementById("btn1");
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);
method3->method2->method1
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);
method1->method2->method3 atachEventバインディングの関数は、バインディングされていません.
function doIt(){
alert(this);
} まずボタンを押します.ボタンを押してから、このボタンにイベントを結びつけます.
<span class="string"style="line-height:1.5;border:none;カラー:菗0000 FF;>lt;span style=「[/color]」lt;span style="line-height:1.5;border:none;font-size:12 pt;「javascript」</spant>ボルトspant>ボルトspant>lt;span style="line-height:1.5;border:none;font-size:12 pt; type=</spant>lt;span class="string"style="line-height:1.5;border:none;カラー:菗0000 FF;>lt;span style=「[/color]」lt;span style="line-height:1.5;border:none;font-size:12 pt;「text/javascript」</spant>ボルトspant>ボルトspant>lt;span style="line-height:1.5;border:none;font-size:12 pt;>gt; &ボルトspant>ボルトligt;
<li style="border-style:none none sonid;border-left-width:3 px;border-left-カラー:rgb(108,226,108);list-style:decimal outside;line-height:14 px;lt;span style="line-height:1.5;border:none;font-size:12 pt;Dcument.getElement ById(</spangt;<span class="string"style="line-height:1.5;border:none;gt;gt;span style="」</spangt;</spangt;<span style=「line-height:1.5;border:none;カラー(0,0,0);font-size:12 pt;"gt;).atachEvent(</spangt;<span class="style="style="line-height:1.5;border:none;カラー:“>span style=”カラー:1.5「>」onclick"</spangt;</spangt;<span style="line-height:1.5;border:none;色彩r b(0,0,0);font-size:12 pt;gt;doIt; &ボルトspant>ボルトligt;
<li style="border-style:none none sonid;border-left-width:3 px;border-left-カラー:rgb(108,226,108);list-style:decimal outside;line-height:14 px;lt;span style="line-height:1.5;border:none;font-size:12 pt; このような処理を経て、doIt法の中のthisはbuttonを代表しませんが、使用します. Dcument.getElemenntById(「btn 4」).onclick=doIt時thisはbtnの代表的なbuttonを指しています. あとは Dcument.getElemenntById(「btn 4」).addEventListener(「click」,doSomething,false);これはthisを結合してもいいです.
最後にすべてのブラウザに対応するイベントの傍受方法を書きます.
//すべてのブラウザに対応するatachEventメソッド
if(!window.attachEvent && window.addEventListener)
{
Window.prototype.attachEvent = HTMLDocument.prototype.attachEvent=
HTMLElement.prototype.attachEvent=function(en, func, cancelBubble)
{
var cb = cancelBubble ? true : false;
this.addEventListener(en.toLowerCase().substr(2), func, cb);
};
}