javascriptイベント処理：このキーワードおよびイベント処理メカニズムの深い理解

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

インラインイベントハンドラーの使用を避けます ]

インラインイベントハンドラー（例：

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

従来のdom0イベント

] 従来のイベント処理方法（たとえば、

link.onclick = eventhandler;

）は、イベントタイプごとに1つのハンドラーのみを割り当てることができます。 注： link.onclick = eventhandler（）; を使用しないでください。これは、 eventhandler functionを直ちに実行し、 onclick 現代Dom2イベント ]

最新のイベント処理により、同じイベントに複数のハンドラーを指定できます。ただし、MicrosoftとW3Cの実装にある程度の違いがあるため、IE9以降は

AddEventListener（）のみをサポートしています。オブジェクト検出を使用して、クロスブラウザーイベントの追加機能を作成できます。

attachevent（link、 "click"、eventhandler）; function attachevent（要素、タイプ、ハンドラー）{ if（element.addeventlistener）element.addeventlistener（タイプ、ハンドラー、false）; else element.attachevent（ "on" Type、Handler）; }

dom0イベントと同様に、すべてのブラウザは、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);
}

ウィンドウ

オブジェクトです。幸いなことに、イベントオブジェクトからターゲット要素を決定できます。 関数eventhandler（e）{ e = e || window.event; var Target = E.Target || E.SRCELEMENT; console.log（ターゲット）; } キーワードの意味 JavaScriptイベントハンドラー

function EventHandler(e) {
  e = e || window.event;
  var target = e.target || e.srcElement;
  console.log(target);
}

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

イベントハンドラーで の使用方法

を使用して、これは他の変数を使用するのと同じように単純です。覚えておいてください、これは、添付のイベントハンドラーのHTML要素を指しています。 javascriptのさまざまなイベントタイプ

javascriptは、 click 、、

、

mouseout 、 keydown

、

keyup 、 load and un load] unload keyup keyup keyup keyup keyup keyup などの複数のイベントをサポートしています。 イベントハンドラーを要素に添付する方法

addeventListener

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

javascriptのイベントオブジェクト

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