English subtitles

← What are Browser Events

Get Embed Code
12 Languages

Showing Revision 3 created 05/25/2016 by Udacity Robot.

  1. Events in real life take the form of
    specific actions occurring at specific
  2. times.
  3. For instance, in the game of basketball,
    when the ball goes through the hoop.
  4. The shooting team gets points.
  5. The event is the ball
    going through the hoop.
  6. The resulting action is that
    the scoring team gets points.
  7. The browser has events as well.
  8. Every time you move your mouse,
    click on a link,
  9. submit a form, or do anything really,
  10. your browser makes an announcement
    of the action you just took.
  11. I want to show you what
    the browser is actually doing.
  12. Google Chrome provides a handy function.
  13. The monitorEvents function, that will
    allow you to take a peek under the hood
  14. to see events as they are taking place.
  15. You pass to the function the element
    on the page that you want it to watch
  16. for events.
  17. Now this function can only be used in
    the console on the Chrome Dev Tools.
  18. Don't try to use this function
    in your JavaScript file.
  19. It won't work, and
    will cause a reference error.
  20. With that disclaimer out of the way, let
    me show you the feedback it provides.
  21. So, on this page, you can see,
    I have a simple text field.
  22. First I'll use jQuery to select
    all the inputs on the page,
  23. then I'll select just
    this first one here.
  24. Next I'm going to call
    the monitorEvents function and
  25. pass it the variable holding
    the first input field.
  26. The monitorEvents function watches
    the element for events, and
  27. log them all out.
  28. So, I'll interact with the text field
    and watch Chrome log out all the events.
  29. As you can see using
    the monitorEvents function,
  30. you can observe what the browsers doing
    when you interact with the page elements
  31. in different ways.