JavaScript には NN4、IE4、W3C/Safari の 3 つのイベント モデルがあるため、ブラウザごとにイベントの処理に違いが生じます。ここでは、IE4 と Firefox でイベントを機能させる方法を示す、いくつかの断片化されたコードの組み合わせを示します。通常の動作。 まず次のコードを見てください:
関数 doEventThing(eventTag ){ var イベント =eventTag||window.event; var currentKey =event.charCode||event.keyCode; var eventsSource =window.event.srcElement||eventTag .target; }
このコードは主にキーボード イベントを処理するために使用されます。IE ではイベントをウィンドウ オブジェクトの属性として直接使用できますが、Firefox では W3C モデルが使用されます。 Parameter メソッドによって渡され、イベントを伝播するために使用されます。つまり、上記の関数では、
eventTag がこの役割を果たします。
varevent=eventTag||window.event;
このコードは、さまざまなブラウザーに応じて正しいイベントを取得し、プログラム内で使用できます。このコードを IE4 で使用する場合、eventTag は null であることが保証されます。そのevent = window.eventですが、Firefoxで実行している場合は、eventTagが手動で与えられるため、var events =eventTagになります。このコード部分の分析に基づいて、 doEventThing メソッドを次のように変更できることがわかります (JavaScript では関数を定義するときにパラメーターの数を明示的に指定できないため):
function doEventThing(){ var events = argument[0] ||window.event; //その他のコード }
Firefox では、arguments[0] は特定の状況 (関数パラメータの数が制限されている場合) でイベントを伝播するためのパラメータとして使用されます。明示的に指定されていません)... .........
var currentKey =event.charCode||event.keyCode; については、IE4 で記録される KeyCode の違いにも起因しますが、 charCode は Firefox で記録されるため、それらの違いに対処する必要があります。
もう 1 つの違いはイベント ソースの取得です。ステートメント
vareventSource = window.event.srcElement||eventTag.target;
IE と W3C の違いも確認しました。
上記のパッケージ化後は、基本的に IE4 と Firefox でイベント メカニズムをスムーズに使用できます。もちろん、汎用性を高めるために、この違いをカプセル化して独自の Event オブジェクトを形成し、それを他のイベントで使用することもできます。プログラムについてはここでは紹介しません。
次に、イベントのバインディングを分析します。イベントは次の 5 つのタイプに大別されます。
1. 要素へのバインディング。これも一般的なものです。
なので、doEventThing をボタン オブジェクトにバインドし、このボタンがクリックされるとイベントがトリガーされます。
2. イベントをオブジェクトにバインドする: これも、特に IE4 では一般的なものです:
document.getElementById("divid").onclick = doEventThing;
3. イベントをバインドするための
4. IE5/Windows のattachEvent() メソッドを使用します
5. W3C DOM の addEventListener() を使用します) Method
addEventListener("eventType",listenerReference,captureFlag);
3 番目のパラメータは、ノードが DOM のいわゆるキャプチャ モードでイベントをリッスンするかどうかを示すブール値です。一般的なイベント リスナーの場合、3 番目のパラメーターは false にする必要があります。
プロトタイプは、IE および W3C と互換性を持たせるためにイベントをバインドするときに次の処理を実行します。
_observeAndCache: function(element, name, observers, useCapture) { if (!this.observers) this.observers = []; if (element. addEventListener ) {//W3C DOM this.observers.push([要素, 名前, オブザーバー, useCapture]); element.addEventListener(名前, オブザーバー, useCapture); else if (要素. attachEvent ) {//IE5/Windows this.observers.push([要素, 名前, オブザーバー, useCapture]); element.attachEvent('on' 名前, オブザーバー); this.observers.pust([element,name,observer,useCapture]) についてはさておき、4 と 5 で説明したイベント バインディングについては非常に明確です。プロトタイプのこのメソッドの useCapture は IE では効果がなく、W3C イベント処理メカニズムでのみ機能することがわかっています。