YouTube

Got a YouTube account?

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

Japanese subtitles

← 03-07 Anatomy_of_a_jQuery_Event_Listener

Get Embed Code
16 Languages

Showing Revision 1 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. 次のクイズで、イベント検知の定義に挑戦しましょう。