javascript - 「これ」は、「on ..」属性の関数内で何を指しますか？

Question

たとえば、との違いは何<td id='xyz' onmouseover='doIt(this)'... ですか <td id='xyz' onmouseover='doIt()'...。thisDOM要素ですか？

Answer 1

ブラウザthisは、イベントの対象となるDOM要素を参照するように構築されたハンドラ関数を呼び出します。したがって、thisこれは、そのような属性が表示されるDOM要素への単なる参照です。

Answer 2

この例でthisは、ハンドラーがバインドされているDOM要素を参照しています。quirksmode.orgの優れた記事を読むことをお勧めします。この記事では、これとイベント処理について詳しく説明しています。

<td id='xyz' onmouseover='doIt(this)'...との違いは何ですか<td id='xyz' onmouseover='doIt()'...

最初のケースでは、DOM要素である関数に引数を渡しますが、2番目のケースでは渡しません。

Answer 3

はDOM要素、このthis例ではDOM要素を参照しますtd。

詳細については、イベントハンドラーのMDNページ、特にインラインイベントハンドラーのセクションを参照してください。

Answer 4

あなたは「違いは何ですか」と尋ねました。違いは、最初のケースでは、呼び出しが実行コンテキストから行われ、が要素への参照であり、その参照が最初のパラメーターとしてthis渡されることです。doIt2番目のケースでは、パラメーターは渡されません。

さて、その理由。

イベントが要素に到達すると、関連するハンドラーは実行するコードがあるかどうかを確認します。this存在する場合は、スコープチェーン上のグローバルオブジェクトと要素に設定されたバインディングを使用して、関数コードのように新しい実行コンテキストを作成します。次に、コードを実行します。したがって、ハンドラーの実行コンテキスト内で、コードが次の場合：

doIt(this)

実行され、this要素を参照します。thisの呼び出しではが設定されていないためdoIt()、thisデフォルトで非ストリクトモードのグローバルオブジェクトになるか、ストリクトモードでは未定義のままになることに注意してください。