Return to Video

Anatomy of a jQuery Event Listener

  • 0:00 - 0:03
    So far,
    you've researched browser events, and
  • 0:03 - 0:05
    you've taken a peak
    at them being logged.
  • 0:05 - 0:09
    Now it's time to actually listen for
    and respond to them with jQuery.
  • 0:09 - 0:13
    There are three items you need in order
    to listen for events and react to them.
  • 0:13 - 0:17
    You need the target element to listen
    to, the event we want to react to,
  • 0:17 - 0:19
    and the actions to take in response.
  • 0:19 - 0:20
    Let me show you an example.
  • 0:22 - 0:25
    I need the target element that
    jQuery will be listening to for
  • 0:25 - 0:29
    events, so I'll use jQuery
    to select the input field.
  • 0:30 - 0:32
    Next, I call the on method.
  • 0:32 - 0:34
    This on method is where
    the magic happens.
  • 0:34 - 0:37
    It's the primary way the jQuery
    uses to set up event listeners.
  • 0:39 - 0:42
    The first argument to the on method
    is the event I want to listen for.
  • 0:42 - 0:44
    In this example, it's keypress.
  • 0:44 - 0:48
    But it could also be click, change,
    and mouseover to name a few.
  • 0:49 - 0:49
    And finally,
  • 0:49 - 0:53
    I need to pass a function with the
    actions I want to happen in response.
  • 0:53 - 0:55
    This function is called the callback.
  • 0:55 - 0:58
    The callback function being
    passed to the on method,
  • 0:58 - 1:00
    is just a regular JavaScript function.
  • 1:00 - 1:02
    And therefore, can contain
    any JavaScript code you want,
  • 1:02 - 1:06
    from altering page content
    to analytics code.
  • 1:06 - 1:08
    I'll change the contents of the function
    to alter the color of the page.
  • 1:10 - 1:11
    And I'll test it.
  • 1:11 - 1:14
    Bam.
    Looks good.
  • 1:14 - 1:16
    In the next quiz, you're going to
    create your own event listener.
Tytuł:
Anatomy of a jQuery Event Listener
Opis:

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

English subtitles

Revisions Compare revisions