YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

Japanese subtitles

← What are Browser Events

Get Embed Code
12 Languages

Showing Revision 1 created 04/22/2016 by 政裕 大窪.

  1. 現実世界のイベントは、次のように定義できるかもしれません。

  2. 関連した動作が実行されるための、ある条件を満たすこと。
  3. 例えばバスケットで、ボールがゴールを通過すると
  4. チームに加点されます。
  5. ボールがゴールを通過すること。 これがイベントです。
  6. チームに加点すること。 これが関連して実行される動作です。

  7. ブラウザも同様で、様々なイベントが定義されています。
  8. マウスを操作する、リンクをクリックする、
  9. フォームで送信する、その他どんな動作も
  10. イベントが発生したのだと、ブラウザは解釈しています。
  11. ブラウザが、実際どのように動作しているか見てみましょう。
  12. Google Chromeは便利な機能を備えています。
  13. monitorEvents(); ファンクションを使うと、普段は隠されていて見えない
  14. イベントの詳細な動作を、覗き見ることができます。
  15. ページ上の動作を確認したいエレメントを引数として、
  16. このファンクションに渡します。
  17. このファンクションは、Chromeデベロッパーツールのコンソール内でのみ使えます。
  18. 独自に作成したJavaScriptプログラム内で、使わないでください。
  19. おそらく、動作せずに参照エラーが発生するでしょう。
  20. 注意書きは以上です。話を戻して、このファンクションの実行結果を見てみましょう。
  21. このページは、ご覧のとおり、単純なテキストフィールドを持っています。
  22. 最初にjQueryを使って、このページのinputエレメントを全て取得します。
  23. そして、その中の最初の一つを選択します。これです。
  24. 次に、monitorEvents(); ファンクションを呼び出して、
  25. inputエレメントを引数として渡します。
  26. monitorEvents(); ファンクションは受け取ったエレメントを監視して
  27. イベントが発生するとログに出力します。
  28. その結果、フィールドに操作を加えるとChromeがログを出力します。
  29. このように、monitorEvents(); ファンクションを使うと、
  30. ページ上の操作に対するブラウザの挙動を
  31. 様々な方法で確認することができます。