Firefox のイベント処理はイベント関数 (onclick=foo() 用) を自動的に検出します_javascript スキル

IE と Firefox のイベント処理
IE では、イベント オブジェクトはグローバル変数として保存され、維持されます。 すべてのブラウザ イベントは、ユーザー
によってトリガーされたか、他のイベントによってトリガーされたかに関係なく、window.event オブジェクトを更新します。 そのため、コードでは、window.event
を呼び出すだけでイベント オブジェクトを簡単に取得でき、その後、event.srcElement を使用して、さらなる処理のためにイベントをトリガーした要素を取得できます
ff では、イベント オブジェクトはありません。グローバル オブジェクト (一般的に) この場合、オンサイトで発生し、オンサイトで使用される場合、ff はイベント オブジェクト
を対応するイベント処理関数に自動的に渡します。 コードでは、関数の最初のパラメータは ff のイベント オブジェクトです。
上記は 2 つのブラウザでのイベント処理メソッドについての私の個人的な理解です。
詳しく説明するためにコードを書きました

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

ボタン 1ボタン ID ="btn2">ボタン 2
<ボタン ID="btn3">ボタン 3

window.onload=function(); 🎜>document.getElementById("btn1").onclick=foo1
document.getElementById("btn2").onclick=foo2
document.getElementById("btn3").onclick=foo3
}
function foo1(){
// ie では window.event がグローバルオブジェクトを作成します
alert(window.event) // ie では「[object]」が表示され、ff では「未定義」が表示されますと表示されます
// ffでは最初のパラメータがイベントオブジェクトから自動的に変更されます
alert(arguments[0]) // ieでは「未定義」と表示されますが、ffでは「[オブジェクト]」と表示されます
}
function foo2(e){
alert(window.event) // ie の下には「[object]」が表示され、ff の下には「未定義」が表示されます
//注, foo2にパラメータを渡したことはありません。 これで、ff は自動的にパラメータを foo2 に渡し、渡されたパラメータ e はイベント オブジェクトです。
alert(e) // ie では「未定義」と表示され、ff では「[オブジェクト]」と表示されます
}
function foo3 (){ //ie と ff の両方の書き込みメソッドと互換性があり、イベント オブジェクトを取得します
alert(arguments[0] || window.event) // ie と ff の両方で、"[object]"と表示されます
var evt =arguments[0] || window.event
var element=evt.srcElement || evt.target //ie および ff の下の btn3 オブジェクトを取得します
alert(element.id) / / btn3
}



これを見ると、ie と ff のイベント処理方法が理解でき、解決策が見つかったようです。

しかし。 。 。 。まだ終わっていないのです。
コードを見てください

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

< ;button id="btn " onclick="foo()">ボタン 1

<script> <br>function foo(){ <br>alert(arguments[0] || ウィンドウ。イベント) <br>} <br></script>


残念ながら、foo が与える結果は未定義であり、期待されたオブジェクトではありません

理由はイベントのバインド方法です
onclick=" foo()" は直接実行されます。foo() 関数にはパラメータがありません。
この場合、Firefox は foo にパラメータを渡すことができません。
この場合、btn. onclick=foo、直接ではないため 関数の実行後にのみ、Firefox はパラメータを foo に渡すことができます。
解決策:
方法 1: Firefox にはパラメータを渡す機会がないので、慎重に行ってください。

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

< button id="btn" onclick="foo(event)">Button

function foo(){
alert(arguments[0] || window.event; )
var evt=arguments[0] || window .event
var element=evt.srcElement || evt.target
alert(element.id)
}


方法 2: 自動検索

コードをコピー コードは次のとおりです。 ボタン 4 <script> </div>function foo4(){ <div class="codebody" id="code60679">var evt= getEvent() <br>var element=evt.srcElement || evt.target <br>alert(element.id) <br>} <br>function getEvent(){ //ie と ff の両方の書き込みと互換性があります <br> if(document.all) return window.event; <br>func=getEvent .caller; <br>var arg0=func.arguments[0]; ){ <br>if((arg0.constructor==Event || arg0 .constructor ==MouseEvent) <br>|| (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation)){ <br>return arg0; <br>} <br>func =func.caller; <br>return <br>} <br></script>
メソッド 2 は元々 Losinet によって作成されたもので、それを改良したものです。元の関数は次のとおりです。

function SearchEvent() { //IE if(document.all) return window.event; while(func!=null)

{

var arg0=func.arguments[0] ;
if(arg0)
{
if(arg0.constructor==Event)
return arg0;
}
func=func.caller; return null;
}


簡単な要約:
上記の両方 このソリューションでは、ff および ie でのイベント処理は (onclick="foo()" かどうかに関係なく) 正しく処理されます。または onclick=foo)
ただし、個人的には、イベントの問題を均一に処理するために getEvent() メソッドを使用することをお勧めします。