Return to Video

03-07 Anatomy_of_a_jQuery_Event_Listener

  • 0:00 - 0:03
    So far, you've researched browser events
  • 0:03 - 0:05
    and you've taken a peak
    at them being logged
  • 0:05 - 0:08
    Now it's time to actually listen for
    and respond to them with jQuery
  • 0:08 - 0:13
    There are 3 items you need in order to
    listen for events and react to them
  • 0:13 - 0:15
    You need: the target element to listen to
  • 0:15 - 0:17
    the event we want to react to
  • 0:17 - 0:19
    and the actions to take in response
  • 0:19 - 0:21
    Let me show you an example
  • 0:22 - 0:26
    I need the target element that jQuery
    will be listening to for events
  • 0:26 - 0:30
    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:38
    It's the primary way the jQuery uses
    to set up event listeners
  • 0:38 - 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 a "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:05
    from altering page content
    to analytics code
  • 1:05 - 1:09
    I'll change the contents of the function
    to alter the colour of the page
  • 1:10 - 1:11
    And I'll test it
  • 1:11 - 1:14
    Bam
    Looks good!
  • 1:14 - 1:17
    In the next quiz, you're going to create
    your own event listener
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

English, British subtitles

Revisions