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 はパラメータのみを渡すことができます。