jsイベントに複数の関数を実行させる問題を解決するwindow.addEventListener_javascriptスキル

おそらく、あなたもこのような状況に遭遇したことがあるのではないでしょうか。つまり、JS コードで window.onload を使用した後、本体の onload イベントに影響を与える可能性があります。すべてを本文に記述することも、すべてを window.onload に配置することもできますが、両方を同時に使用する必要がある場合があります。このとき、window.attachEvent と window.addEventListener を使用して解決する必要があります。

これが解決策です。 AttachEvent と addEventListener の使用方法については、Google または Baidu を自分で調べることができます。

コードをコピー コードは次のとおりです。

if (document.all){
window.attachEvent('onload', 関数名)//
}
else{
window.addEventListener('load', 関数名, false);//firefox
}

最近の作業では、attachEvent メソッドが使用されており、特定のイベントに他の処理イベントをアタッチできる場合があります。これは、その基本的な使用法をまとめたものです。

その構文については、詳細な手順が記載されている「DHTML マニュアル」を参照してください。次に、インターネットから取得した例を示します。

コードをコピーします コードは次のとおりです。

document.getElementById("btn").onclick = method1;
document.getElementById("btn") .onclick = method2;
document.getElementById("btn").onclick = method3;

このように書くと medhot3 のみが実行されます

次のように記述します :

コードをコピーします コードは次のとおりです:

var btn1Obj = document.getElementById("btn1");
//object.attachEvent(event,function);
btn1Obj.attachEvent("onclick",method1); );
btn1Obj.attachEvent("onclick ",method3);

実行順序は、method3->method2->method1

Mozilla系の場合、このメソッドはサポートされていないため、addEventListener を使用する必要があります。

コードをコピー コードは次のとおりです:

var btn1Obj = document.getElementById("btn1");
//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener("click",method1,false); btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);


実行順序は、method1->method2-> です。方法3