js_javascriptスキルでイベントオブジェクトを取得する方法のまとめ

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

var evt = window.event argument[0] ;

イベントを追加するには次の 3 つの方法があります。これまで見たことのない方法が表示される場合があります。
1. イベントを追加する最初の方法は、HTML の属性に直接 JS コードを記述することです

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

Div1 要素

これはおそらく前世紀 1990 年代の記述方法では、Web ページに直接 JS コードを記述するのが非常に一般的でした。おそらく、当時の JS はそれほど重要ではなく、検証や派手な効果のためにのみ使用されていました。イベントを追加するこの方法でイベントオブジェクトを取得するにはどうすればよいですか? IE ではイベントはグローバル オブジェクトなので非常に簡単です。次のようにイベントを直接使用できます。

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

Div1 要素

Div、IE では、「クリック」文字を含む情報ボックスがポップアップ表示されます。これは、イベントオブジェクトが取得できたことを意味します。Opera/Safari/Chrome でテストすると、結果は IE と同じであることがわかります。これは、Opera/Safari/Chrome も IE メソッド (window.event) をサポートしていることを意味します。イベントオブジェクトを取得します。
Firefox ではエラーが報告され、次のプロンプトが表示されます: window.event が未定義です。これは、記事の冒頭で説明したように、Firefox がイベント オブジェクトを取得するための IE メソッドをサポートしていないが、ハンドルの最初のパラメータを渡していることを示しています。 。
上記では、window.event を使用してイベント オブジェクトを取得しています。実際、window.alert の代わりにalert を使用するのと同じように、window を省略できます。たとえば、

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

Div1 要素

IE/Opera/Safari/Chrome でテストしましたが、先ほどと違いはありません。 Firefox で再度テストしてみると、「未定義」ではなく「クリック」情報ボックスが表示されることがわかります。
2 つのテストの唯一の違いは、1 つは window.event.type を使用し、もう 1 つはevent.type を使用することです。この問題については、以下で詳しく説明します。
以下では、ハンドルの最初のパラメーターを使用してイベント オブジェクトを取得します。onclick 属性の値は、実際にはこの匿名関数内の JS コードであると想像できます。
この場合、Function の属性引数を通じて匿名関数の最初のパラメーターを取得できます。このパラメーターはイベント オブジェクトです。たとえば、

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

Div1 要素

IE でエラーが報告され、次のプロンプトが表示されます: argument.0.type が空であるか、オブジェクトではありません
Firefox/Opera/Safari/Chrome 「クリック」の内容を含む情報ボックスがポップアップ表示され、ハンドルの最初のパラメーターとして渡されるイベント オブジェクトがすべてサポートされていることを示します。また、Opera/Safari/Chrome がイベント オブジェクトを取得する W3C 標準メソッドをサポートしているだけでなく、イベント オブジェクトを取得する IE メソッドとも互換性があることを側面から示しています。
onclick が匿名関数に対応することがわかったので、次のコードだけが必要です。

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

Div1 Element

🎜>

各ブラウザで Div をクリックすると、結果は次のようになります:

IE6/7/8 :

function onclick(){alert(arguments.callee);}

IE9 :

関数 onclick(event){alert(arguments.callee);}

Firefox / Safari :
function onclick(event) {alert(arguments.callee);}

Chrome:
function onclick(evt) {alert(arguments.callee);}

オペラ:

関数 anonymous(event) {alert(arguments.callee);}

これらの関数を観察すると、
IE6/7/8 はパラメーターを定義していません
IE9/Firefox/Safari/Opera はパラメーターevent を定義しています
Chrome はパラメーター evt を定義しています。
次のように、上記の残りの質問に戻ります

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

Div1 要素

Div1 要素< ;/div>

これら 2 つの div の唯一の違いは、window.event.type とevent.type です。それぞれをクリックした後、後者は Firefox では「未定義」ではなく「クリック」と表示されます。これは、Firefox の匿名関数がパラメータ イベントを定義しているため、たまたま IE のグローバル オブジェクト イベントと同じ名前が付いているため、誤って認識されるためです。 Firefox はイベント オブジェクトを取得するための IE メソッドもサポートしています。

同様の理由で、Chrome で定義されているパラメータは evt であるため、次の方法で Chrome でイベント オブジェクトを取得することもできます。

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

Div1 要素

2. イベントを追加する 2 番目の方法は、関数を定義し、それを HTML 要素

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

Div2 要素

まず関数 clk を定義し、それを onclick 属性に割り当てます。この方法も1990年代に流行った書き方のはずです。最初の方法より優れている点は、ビジネス ロジック コードを関数にカプセル化することで、HTML コードと JS コードがわずかに分離され、最初の方法ほど密接に結合されていないことです。

この方法で (clk 関数内で) イベント オブジェクトを取得するにはどうすればよいですか? IE で次のようなグローバル オブジェクト イベントを使用しても問題はありません。

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

div onclick="clk()"> ;Div2 要素

Firefox を除く IE/Opera/Safari/Chrome では、Div をクリックした後、イベント オブジェクトを正常に取得できます。前述したように、Opera/Safari/Chrome はイベントオブジェクトの取得に IE (window.event) に対応していますが、Firefox はサポートしていません。したがって、Firefox はパラメータのみを渡すことができます。

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

Div2 要素

Firefox の匿名関数にはイベント パラメータがあり、clk() は匿名関数内にあるため、匿名関数

を出力するとわかります。コードをコピーします コードは次のとおりです。

Div2 要素

Div をクリックすると、情報ボックスをポップアップします 内容は次のとおりです

コードをコピーします コードは次のとおりです: 関数 onclick(event) {

clk ()

}

;
clk のalert(event) に戻ります。匿名関数のイベントが渡されるため、clk は実際にクリックすると、イベントが定義されていないというエラーを報告します。無名関数のクロージャと関数 clk(){alert(event);} が同じクロージャ環境にないことが推測されます。この方法が機能しない場合は、

コードをコピー などの表示されたパラメータを渡すことのみが可能です。 コードは次のとおりです。 :

div onclick="clk (arguments[0])">Div2 Element

Div をクリックすると、Firefox およびパラメータの受け渡しをサポートするブラウザでイベント オブジェクトが正しく表示されます。 Opera/Safari など、/Chrome も可能です。
上記のコードのarguments[0]をeventに変更すると、すべてのブラウザがそれをサポートするようになります。
上記のコードの argument[0] を window.event に変更すると、Firefox のみがサポートされなくなります。
上記のコードの argument[0] を evt に変更すると、Chrome のみがそれをサポートするようになります。
その理由を考えてみませんか?

3. イベントを追加する 3 番目の方法は、element.onXXX メソッドを使用することです

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

Div3 要素

このメソッドも比較的初期のものですが、利点は次のとおりです。 JS と HTML を組み合わせることは完全に分離できますが、その前提として、追加の id 属性を HTML 要素 (または要素オブジェクトを取得する他の方法) に提供する必要があります。
この方法でイベントを追加します。IE6/7/8 は window.event のみをサポートし、パラメーターの受け渡しはサポートしません。Firefox はパラメーターの受け渡しのみをサポートし、他のメソッドはサポートしません。どちらの方法も、IE9/Opera/Safari/Chrome でサポートされています。
4. イベントを追加する 4 番目の方法は、addEventListener または IE 独自のattachEvent を使用することです。

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

Div4 要素

これは現在推奨されています最初の 2 つのメソッドはより強力です。要素に複数のハンドル (または応答関数) を追加し、最初の 3 つのメソッドはすべてデフォルトでバブリングをサポートします。もちろん、IE6/7/8 はまだ標準に従っておらず、独自の独自のattachEventを使用しており、イベント キャプチャをサポートしていません。 addEventListener は IE9 ですでにサポートされています。
最初に window.even を使用してテストします (例:

コードをコピーします コードは次のとおりです: < ;script type="text/javascript">

var d4 = document.getElementById('d4');

function clk(){alert(window.event)}
if(d4.addEventListener) {
d4.addEventListener('click',clk,false);
if(d4.attachEvent){
d4.attachEvent('onclick',clk); ;
}



Div[id=d4] をクリックすると、IE/Opera/Safari/Chrome ではすべてイベント オブジェクト情報ボックスが表示されます。 Firefox はイベント オブジェクトとして window.event をサポートしていないため、このうち期待される「未定義」。
は、

などのハンドルの最初のパラメーター テストに置き換えられます。 コードをコピーします

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


テストする前に、結果がどのようになるかを推測してください。IE では未定義がポップアップするはずで、他のブラウザはイベント オブジェクトであると考える人もいるかもしれません。実際、ブラウザにポップアップ表示されるすべての情報ボックスはイベント オブジェクトです。
要約すると、
1. IE6/7/8 は、window.event を介してイベントを追加するときに、ハンドルの最初のパラメーターとしてイベント オブジェクトを渡すこともサポートします。 Firefox のみがサポートしています。イベント オブジェクトはハンドル
3 の最初のパラメータとして渡されます。両方のメソッドは IE9/Opera/Safari/Chrome でサポートされています

。