Firefox にイベント オブジェクト実装 code_javascript スキルをサポートさせよう

通常、IE および FireFox と互換性を持たせるために、一般的なイベント処理メソッドは次のとおりです。

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

btn.onclick=handle_btn_click;
function handle_btn_click(evt){
if(evt==null)evt=window.event;//IE
// イベントを処理します.
}

単純なプログラムの場合、これは問題ありません。
一部の複雑なプログラムでは、特定の関数を渡したい場合があります。
次は、この問題を解決するための方法と原則です。
JScript では、関数呼び出しには func.caller という属性があります。
たとえば、

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

function A()
{
B();
}
function B()
{
alert(B.caller)
}

B が A の場合、 B.caller は A
さらに、この関数には argument 属性があり、この属性は関数の現在の実行のパラメーターをトラバースできます:

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

function myalert()
{
var arr=[];
for(var i=0; iarr[i]=myalert.arguments[i];
alert(arr.join("-")); hello","world ",1,2,3)


は hello-world-1-2-3

を表示します (引数の数は呼び出し元に関連しており、何もありません)関係)
これら 2 つの属性に従って、最初の関数のイベント オブジェクトを取得できます:

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

btn.onclick=handle_click;

function handle_click()
{
showcontent(); }
function showcontent()
{
var evt=SearchEvent();
if(evt&&evt.shiftKey)//イベントベースの呼び出しで、Shift キーが押された場合は、
ウィンドウ。 open(global_helpurl);
else
location .href=global_helpurl;
function SearchEvent()
{
func=SearchEvent.caller
while(func!=) null)
{
var arg0=func .arguments[0];
if(arg0)
{
if(arg0.constructor==Event) // イベントオブジェクトの場合
return arg0;
}
func= func.caller;
}


この例では、SearchEvent を使用してイベントを検索します
この例を実行すると、
SearchEvent.caller は showcontent ですが、showcontent.arguments[0] は空になります。つまり、func=func.caller の場合、func になります。 handle_click.
handle_click は FireFox によって呼び出されますが、パラメータは定義されていませんが、呼び出されるときの最初のパラメータはイベントなので、handle_click.arguments[0] はイベントです。
上記の知識に基づいて、次のように組み合わせることができます。 FireFox で window.event を実装するためのprototype.__defineGetter__:

興味がある場合は、それを追加できます (既に変更しています)




コードをコピーします

コードは次のとおりです: function handle_click() { if(window.addEventListener) {

FixPrototypeForGecko();

alert(window.event.srcElement)
}
}
関数 FixPrototypeForGecko()
{
HTMLElement.prototype.__defineGetter__("runtimeStyle",element_prototype_get_runtimeStyle);
window.constructor .prototype.__defineGetter__("event",window_prototype_get_event);
Event.prototype.__defineGetter__("srcElement",event_prototype_get_srcElement); 🎜> }
function element_prototype_get_runtimeStyle()
{
//代わりにスタイルを返します...
return this.style;
}
function window_prototype_get_event()
{
return SearchEvent();
}
関数event_prototype_get_srcElement()
{
return this.target;
}
関数 SearchEvent()
{
//IE
if(document.all)
return window.event;
func =SearchEvent.caller;
while(func!=null)
{
var arg0=func.arguments[0] ;
if(arg0)
{
//if( arg0.constructor==Event)
if(arg0.constructor==Event||arg0.constructor==MouseEvent || (typeof( arg0)=="オブジェクト" && arg0.preventDefault && arg0.stopPropagation))
return arg0;
}
func=func.caller;
return
}

ここをクリックしてください!!

JavaScript と JScript も異なります。前者はクライアント側のスクリプトであり、後者は VBScript と同様にサーバーによってサポートされます。
もちろん、私はここでそれについて話すつもりはありません。 2 つの違いですが、私の現在のレベル (平均ではありません) をお知らせします。
上記のコードだけを説明すると、互換性に取り組み始めたばかりの友人は難しいと思うでしょう。これらのコードの使用法を理解するには
ここで説明します まず上記のコードの使用法を説明しましょう
まず 2 つのメソッド __defineGetter__ と __defineSetter__ の説明を見てみましょう:
1. Getter はメソッドですSetter は属性の値を取得するメソッドであり、Setter はプロパティの値を設定するメソッドです。事前定義されたコア オブジェクトまたはユーザー定義オブジェクトに対してゲッター メソッドとセッター メソッドを定義できるため、既存のオブジェクトに新しいプロパティを追加できます。
2. 新しい属性はいつオブジェクトやイベントに追加できますか?
1. オブジェクトの初期化時に定義します
2. オブジェクトの __defineGetter__ メソッドと __defineSetter__ メソッドを使用して定義を追加します
詳細な使用法については、__defineGetter__ と __defineSetter__ の説明をここで参照してください (アドレス: http://anbutu.javaeye.com/blog/post/194276)
FixPrototypeForGecko() 関数で属性が追加されることがわかりました。それぞれ 3 つのオブジェクトです。もちろん、オブジェクトは FF の下に追加されます。
HTMLElement は "runtimeStyle" 属性を追加します。属性値は element_prototype_get_runtimeStyle 関数によって返される値です。
window は "event" 属性を追加します。 value は、window_prototype_get_event によって返される値です
イベントは「srcElement」属性を追加し、基本属性値は、event_prototype_get_srcElement 関数によって返される値です
このようにして、FFそこで、ブラウザが FF かどうかを判断した後、FixPrototypeForGecko() 処理を実行します。このとき、これら 3 つのオブジェクトは FF の下に新しい属性を持っています。
DIV タグをクリックすると、ポップアップ ウィンドウに が表示されます。 「[object HTMLDivElement]」という単語に到達すると、ウィンドウ オブジェクトにイベント属性が正常に追加されたことも意味します

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

if(window.addEventListener) {
FixPrototypeForGecko();
alert(window.event.srcElement)
}

element_prototype_get_runtimeStyle プロセスとevent_prototype_get_srcElement プロセスを見ると、戻り値が簡単に理解できます
window_prototype_get_event() プロセスがどのようにイベントを返すかを見てみましょう
プロセスの値は SearchEvent() プロセスの結果です。このプロセスを見てください

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

function SearchEvent()
{
//IE
if(document.all)
return window.event
func=SearchEvent;呼び出し元;
while(func!=null)
{
var arg0=func.arguments[0]
if(arg0)
{
//if(arg0.constructor) ==Event||arg0.constructor==MouseEvent)
if(arg0.constructor ==Event||arg0.constructor==MouseEvent || (typeof(arg0)=="object" && arg0.preventDefault && arg0. stopPropagation))
return arg0;
}
func=func.caller;
return
}


このプロセスを理解するには、まず、呼び出し元と引数の 2 つのメソッドを理解する必要があります (記事内に対応する説明があります)

ここで、コンストラクター属性について再度説明します。返されるのは、オブジェクトの対応するオブジェクトの作成者です。
そのうち。ループ、アラート(func) 最後の戻りである func.caller の戻りがわかります。 これはマウス クリック イベントです
div をクリックした後に handle_click() プロセスが実行されるため、最終的な func.caller は次のようになります。このとき、funcj は handle_click() なので、 handle_click.caller はもちろん、handle_click の呼び出し元は [MouseEvent] である onclick イベントです。
を追加したことがわかります。 if(arg0.constructor==Event||arg0.constructor==MouseEvent) の条件。arg0.constructor の現在の結果は MouseEvent なので
これを見れば、誰もが FF でイベントを記述する方法を知っていると思います
最後に、オブジェクトのイベント メソッドを登録する「addEventListener」について説明します

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

function addObjectEvent(objId,eventName,eventFunc)
{
var targetObj = document.getElementById(objId);
if(targetObj)
{
if(targetObj.attachEvent)
{
targetObj.attachEvent(eventName,eventFunc);
}
else if(targetObj.addEventListener)
{
eventName =eventName.toString().replace(/on(.*)/i,'$1');
targetObj.addEventListener(eventName,eventFunc,true);
}
}
}
function test1()
{
alert('test1');
}
関数 test2()
{
alert('test2');
}

on click

addObjectEvent('hi','onclick',test1);
addObjectEvent('hi','onclick',test2);//先执実行test2(队列)