YouTube

Got a YouTube account?

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

Japanese subtitles

← Anatomy of a jQuery Event Listener

Get Embed Code
15 Languages

Showing Revision 2 created 04/27/2016 by 政裕 大窪.

  1. ここまでで、イベントの仕様を調査する方法と

  2. イベントの挙動をログで確認する方法とを学びました。
  3. ではjQueryでイベントを検知し、応答してみましょう。
  4. イベントに応答するには、3つの設定が必要です。
  5. 検知対象エレメントの指定、応答すべきイベントの指定、
  6. そして、実行される動作の指定です。
  7. 例を見てみましょう。
  8. 検知したいエレメントを、jQueryで指定します。
  9. この例の場合、inputフィールド指定しています。
  10. 次にon()メソッドを呼び出します。
  11. このon()メソッドがjQueryの魔法の源です。
  12. このメソッドにより、イベントリスナーが設定されます。
  13. 最初の引数に、検知したいイベント名を指定します。
  14. この例の場合、keypressイベントです。
  15. 他にclick,change,mouseoverなど、幾つかが設定可能です。
  16. そして最後に
  17. 実行される動作を定義したファンクションを指定します。
  18. このファンクションのことをコールバックと呼びます。
  19. on()メソッドに渡される、このコールバックは
  20. 正規のJavaScriptファンクションです。
  21. ですので、ページ内容の操作からユーザ行動の分析まで
  22. どんなJavaScriptコードでも実行可能です。
  23. 試しにページの色を変えるファンクションを定義して、、、
  24. 実行してみます。
  25. どーん。成功です。:)
  26. 次のクイズで、イベント検知の定義に挑戦しましょう。