JavaScriptイベントバインディングの使い方を詳しく解説

HTML は上から下にロードされるため、通常、head セクションに JavaScript ファイルを導入する場合、ドキュメントのロード時の DOM 操作でのエラーを防ぐために、JavaScript の先頭に window.onload イベントを追加します。複数の JavaScript ファイルがある場合、複数の window.onload イベントが発生する可能性が高くなりますが、最終的に機能するのは 1 つだけです。現時点では、この問題を解決するにはイベント バインディングを使用する必要があります。

IEメソッド
attachEvent(イベント名, 関数)、バインドイベント処理関数
detachEvent(イベント名, 関数)、unbind

DOMメソッド
addEventListener(イベント名, 関数, キャプチャ)
removeEventListener(イベント名, 関数, キャプチャ)

このjsコードの実行結果は、oBtnのクリックイベントが2つあるため、ポップアップbとなっていますが、この時、イベントバインディングの重要性が反映されており、最後の1つだけが実行されます。

イベント バインディングを使用すると、両方のクリック イベントが実行されますが、実行順序はブラウザーによって異なります。 IE では下から上に実行されますが、他のブラウザでは上から下に実行されます。ただし、アラートの特殊性により、他のステートメントは基本的には同等ですが、違いはありません。たとえば、前の記事では、画像カルーセル内の setInterval 間の微妙な時間の違いが最終的にスクロールの混乱を引き起こしました。 画像カルーセル domo はネイティブ JavaScript に基づいています

最後に、後で使用できるようにコードを関数に整理します

function myAddEvent(obj, ev, fn)
{
  if(obj.attachEvent)
  {
    obj.attachEvent('on'+ev, fn);
  }
  else
  {
    obj.addEventListener(ev, fn, false);
  }
}

この時点で複数の window.onload イベントを使用する必要がある場合、実際には複数の oBtn.onclick イベントを使用するのとほぼ同じです。次のように関数を呼び出すだけです。