JavaScriptイベントの説明

ブラウザのJavaScriptは、イベント駆動型プログラミングモデルを使用します。すべては、イベントをフォローすることから始まります。これはJavaScriptイベントの概要とイベント処理の仕組みです

前書き

ブラウザのJavaScriptは、イベント駆動型プログラミングモデルを使用します。

すべては、イベントをフォローすることから始まります。

イベントは、DOMが読み込まれるか、フェッチを終了する非同期リクエストであるか、ユーザーが要素をクリックするかページをスクロールするか、ユーザーがキーボードで入力する可能性があります。

さまざまな種類のイベントがあります。

イベントハンドラー

を使用して任意のイベントに応答できますイベントハンドラー、イベントが発生したときに呼び出される関数です。

同じイベントに複数のハンドラーを登録することができ、それらはすべて、そのイベントが発生したときに呼び出されます。

JavaScriptは、イベントハンドラーを登録する3つの方法を提供します。

インラインイベントハンドラー

このスタイルのイベントハンドラーは、その制約のために今日ではほとんど使用されていませんが、JavaScriptの初期の頃はこれが唯一の方法でした。

<a href="site.com" onclick="dosomething();">A link</a>

DOMオンイベントハンドラー

この場合、複数のハンドラーを追加する方法がないため、これは、オブジェクトに最大で1つのイベントハンドラーがある場合に一般的です。

window.onload = () => {
  //window loaded
}

取り扱い時に最も一般的に使用されますXHRリクエスト:

const xhr = new XMLHttpRequest()
xhr.onreadystatechange = () => {
  //.. do something
}

を使用して、ハンドラーが既にプロパティに割り当てられているかどうかを確認できます。if ('onsomething' in window) {}

使用するaddEventListener()

これは現代的な方法。このメソッドを使用すると、必要な数のハンドラーを登録できます。これは、最も一般的な方法です。

window.addEventListener('load', () => {
  //window loaded
})

IE8以下はこれをサポートしておらず、代わりに独自のものを使用していることに注意してくださいattachEvent()API。古いブラウザをサポートする必要がある場合は、この点に注意してください。

さまざまな要素を聞く

あなたは聞くことができますwindowキーボードの使用などの「グローバル」イベントをインターセプトし、特定の要素をリッスンして、ボタンをマウスでクリックするなど、それらの要素で発生しているイベントを確認できます。

これが理由ですaddEventListener時々呼ばれますwindow、場合によってはDOM要素上。

イベントオブジェクト

イベントハンドラーはEvent最初のパラメータとしてのオブジェクト:

const link = document.getElementById('my-link')
link.addEventListener('click', event => {
  // link clicked
})

このオブジェクトには、次のような便利なプロパティとメソッドが多数含まれています。

  • target、イベントを発生させたDOM要素
  • type、イベントの種類
  • stopPropagation()、DOMでのイベントの伝播を停止するために呼び出されます

((全リストを見る)。

その他のプロパティは、特定の種類のイベントによって提供されます。Eventさまざまな特定のイベントのインターフェイスです。

それぞれにMDNページがリンクされているため、すべてのプロパティを調べることができます。

たとえば、KeyboardEventが発生した場合、どのキーが押されたかを読み取り可能な形式で確認できます(EscapeEnterなど)をチェックしてkeyプロパティ:

window.addEventListener('keydown', event => {
  // key pressed
  console.log(event.key)
})

マウスイベントでは、どのマウスボタンが押されたかを確認できます。

const link = document.getElementById('my-link')
link.addEventListener('mousedown', event => {
  // mouse button pressed
  console.log(event.button) //0=left, 2=right
})

イベントバブリングとイベントキャプチャ

バブリングとキャプチャは、イベントが伝播するために使用する2つのモデルです。

DOM構造が

<div id="container">
  <button>Click me</button>
</div>

ユーザーがボタンをクリックしたときを追跡する必要があり、2つのイベントリスナーがあります。button、および1つ#container。子要素をクリックすると、伝播を停止しない限り、常にその親に伝播することに注意してください(後述)。

これらのイベントリスナーは順番に呼び出され、この順序は、使用されるイベントバブリング/キャプチャモデルによって決定されます。

バブリングこれは、クリックされたアイテム(子)から、最も近いものから始めて、そのすべての親ツリーにイベントが伝播することを意味します。

この例では、buttonの前に発砲します#containerハンドラ。

キャプチャ反対です。外側のイベントハンドラーは、より具体的なハンドラーの前に起動されます。button

デフォルトでは、すべてのイベントがバブルします

addEventListenerに3番目の引数を適用し、次のように設定することで、イベントキャプチャを採用することを選択できます。true

document.getElementById('container').addEventListener(
  'click',
  () => {
    //window loaded
  },
  true
)

ご了承ください最初にすべてのキャプチャイベントハンドラが実行されます

次に、すべてのバブリングイベントハンドラー。

順序はこの原則に従います。DOMはWindowオブジェクトから始まるすべての要素を調べ、クリックされたアイテムを見つけます。その間、イベントに関連付けられているイベントハンドラーを呼び出します(キャプチャフェーズ)。

ターゲットに到達すると、Windowオブジェクトまで親ツリーまでの移動を繰り返し、イベントハンドラーを再度呼び出します(バブリングフェーズ)。

伝播を停止する

DOM要素のイベントは、停止されない限り、そのすべての親要素ツリーに伝播されます。

<html>
  <body>
    <section>
      <a id="my-link" ...>

上のクリックイベントaに伝播しますsectionその後body

を呼び出すことで伝播を停止できますstopPropagation()イベントのメソッド。通常はイベントハンドラーの最後にあります。

const link = document.getElementById('my-link')
link.addEventListener('mousedown', event => {
  // process the event
  // ...

  event.stopPropagation()
})

処理する可能性のある最も一般的なイベントのリストを次に示します。

負荷

loadに解雇されますwindowそしてそのbodyページの読み込みが完了したときの要素。

マウスイベント

clickマウスボタンがクリックされたときに発生します。dblclickマウスが2回クリックされたとき。もちろんこの場合clickこのイベントの直前に解雇されます。mousedownmousemoveそしてmouseupドラッグアンドドロップイベントを追跡するために組み合わせて使用できます。注意してくださいmousemove、マウスの移動中に何度も発火するため(を参照)スロットル後で)

キーボードイベント

keydownキーボードボタンが押されたとき(およびボタンが押されている間にキーが繰り返されたとき)に発生しますとどまる押された)。keyupキーを離すと発火します。

スクロール

ザ・scrollイベントが発生しますwindowページをスクロールするたびに。イベントハンドラー内では、チェックすることで現在のスクロール位置をチェックできます。window.scrollY

このイベントは1回限りのものではないことに注意してください。スクロールの終了時や開始時だけでなく、スクロール中に何度も発生するため、ハンドラーで大量の計算や操作を行わないでください。スロットル代わりに。

スロットル

上で述べたように、mousemoveそしてscrollは、イベントごとに1回だけ発生するのではなく、アクションの全期間中、イベントハンドラー関数を継続的に呼び出す2つのイベントです。

これは、座標を提供するため、何が起こっているかを追跡できるためです。

イベントハンドラーで複雑な操作を実行すると、パフォーマンスに影響を与え、サイトユーザーのエクスペリエンスが低下します。

のようなスロットルを提供するライブラリLodash考えられるすべてのユースケースを処理するために、100行以上のコードで実装します。シンプルで理解しやすい実装はこれです。setTimeout100ミリ秒ごとにスクロールイベントをキャッシュするには:

let cached = null
window.addEventListener('scroll', event => {
  if (!cached) {
    setTimeout(() => {
      //you can access the original event at `cached`
      cached = null
    }, 100)
  }
  cached = event
})

私の無料ダウンロードJavaScriptビギナーズハンドブック


その他のjsチュートリアル: