JavaScript＆＃x27; This＆＃x27;イベントハンドラー

javaScriptイベント処理：thisキーワードとイベント処理メカニズムの深い理解

効率的なクライアントWebアプリケーションをJavaScriptイベント処理メカニズムから分離することはできません。イベントにより、JavaScriptは、マウスホバー、リンクのクリック、ページスクロール、ウィンドウのサイズ変更、オブジェクトのドラッグなどのユーザー動作を検出できます。 JavaScriptコードは、特定のイベントが発生したときにトリガーするイベントハンドラーを登録できます。ほとんどのブラウザは、キー情報、マウスカーソル位置など、イベント情報を含む単一のオブジェクトを関数に渡します。その後、アニメーション要素、AJAXリクエストの開始、ブラウザのデフォルト動作のブロックなどの特定のアクションを実行できます。さらに、thisキーワードも設定される場合があります。通常、thisは、常にではないが、イベントをトリガーする要素を指しています。

インラインイベントハンドラーの使用は避けてください）は単純ですが、多くの欠点があります。それらは非常に制限的で不器用で、HTMLコードを膨らませることができます。イベントコールとハンドラーはさまざまな場所で定義されているため、維持するのは複雑です。最後に、ページが読み込まれたときにイベントが呼び出される可能性があるため、スクリプトタグは下部ではなくHTMLの上部に配置する必要があります。

<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" onclick="EventHandler();">click me</a>従来のdom0イベント

従来のイベント処理方法（たとえば、）はシンプルで直接的ですが、イベントタイプごとに1つのハンドラーのみを割り当てることができます。 注：

を使用しないでください。これにより、

関数がすぐに実行され、link.onclick = EventHandler;ノードのlink.onclick = EventHandler();属性に戻り値（未定義）を割り当てます。これはエラーを報告しませんが、クリックイベントが発生したときにハンドラーが呼び出されることはありません。 EventHandler https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15blinkonclickモダンなdom2イベント

最新のイベント処理により、同じイベントに複数のハンドラーを指定できます。ただし、MicrosoftとW3Cの実装のいくつかの違いがあるため、IE9以降のサポートのみがサポートされています。オブジェクト検出を使用して、クロスブラウザーイベントを作成できます。

dom0イベントと同様に、すべてのブラウザはイベントをトリガーする要素にaddEventListener()を設定します... IE8以下を除く。 IE8以下では、

は常にグローバル

AttachEvent(link, "click", EventHandler);

function AttachEvent(element, type, handler) {
  if (element.addEventListener) element.addEventListener(type, handler, false);
  else element.attachEvent("on" + type, handler);
}

オブジェクトです。幸いなことに、イベントオブジェクトからターゲット要素を決定できます。

thisthisjavascriptイベントハンドラーのキーワードの意味window

thisキーワードは、関数が呼び出されるコンテキストを指します。イベントハンドラーでは、thisは通常、イベントハンドラーを接続するHTML要素を指します。これにより、要素に直接アクセスして操作できます。

イベントハンドラーで

で使用する方法this

の使用は、他の変数を使用するのと同じようにシンプルです。イベントハンドラーを接続するHTML要素を指しているthisを覚えておいてください。 this JavaScriptのさまざまなイベントタイプ

javaScriptは、、

、

、click、mouseover、mouseout、keydown、keyup、load、unloadなどの複数のイベントをサポートしています。

イベントハンドラーを要素に添付する方法

イベントハンドラーは、addEventListenerメソッドを使用して要素に接続できます。このメソッドは、2つのパラメーターを受け入れます。聞くべきイベントの名前と、イベントが発生したときに実行する関数です。

JavaScript イベントオブジェクトは、イベントが発生したときに作成された特別なオブジェクトです。このオブジェクトには、イベントタイプ、ターゲット要素、イベントの発生時間など、イベントに関する情報が含まれています。イベントハンドラー機能でイベントオブジェクトにアクセスできます。

以上がJavaScript＆＃x27; This＆＃x27;イベントハンドラーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。