Return to Video

03-07 Anatomy_of_a_jQuery_Event_Listener

  • 0:00 - 0:03
    ここまでで、イベントの仕様を調査する方法と
  • 0:03 - 0:05
    イベントの挙動をログで確認する方法とを学びました。
  • 0:05 - 0:09
    では、jQueryを使ってイベントに応答してみましょう。
  • 0:09 - 0:13
    イベントに応答するには、3つの設定が必要です。
  • 0:13 - 0:17
    検知対象エレメントの指定、応答すべきイベントの指定、
  • 0:17 - 0:19
    そして、応答として実行される動作の定義です。
  • 0:19 - 0:21
    例を見てみましょう。
  • 0:22 - 0:25
    検知対象にしたいエレメントを、jQueryで指定します。
  • 0:25 - 0:29
    この例の場合、inputフィールド指定しています。
  • 0:30 - 0:32
    次にon()メソッドを呼び出します。
  • 0:32 - 0:34
    このon()メソッドがjQueryの魔法の源です。
  • 0:34 - 0:37
    このメソッドにより、イベント検知が設定されます。
  • 0:39 - 0:42
    最初の引数に、検知したいイベント名を指定します。
  • 0:42 - 0:44
    この例の場合、keypressイベントです。
  • 0:44 - 0:48
    他にclick,change,mouseoverなど、幾つかが設定可能です。
  • 0:49 - 0:49
    そして最後に
  • 0:49 - 0:53
    実行される動作を定義したファンクションを指定します。
  • 0:53 - 0:55
    このファンクションのことをコールバックと呼びます。
  • 0:55 - 0:58
    on()メソッドに渡される、このコールバックは
  • 0:58 - 1:00
    正規のJavaScriptファンクションです。
  • 1:00 - 1:02
    ですので、ページ内容の操作からユーザ行動の分析まで
  • 1:02 - 1:06
    どんなJavaScriptコードでも実行可能です。
  • 1:06 - 1:08
    試しにページの色を変えるファンクションを定義して、、、
  • 1:10 - 1:11
    実行してみます。
  • 1:11 - 1:14
    どーん。成功です。:)
  • 1:14 - 1:16
    次のクイズで、イベント検知の定義に挑戦しましょう。
Tytuł:
03-07 Anatomy_of_a_jQuery_Event_Listener
Opis:

more » « less
Video Language:
English
Team:
Udacity
Projekt:
ud245 - Intro to JQuery
Duration:
01:18

Japanese subtitles

Revisions Compare revisions