[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.24,0:00:04.09,Default,,0000,0000,0000,,Events in real life take the form of\Nspecific actions occurring at specific
Dialogue: 0,0:00:04.09,0:00:04.77,Default,,0000,0000,0000,,times.
Dialogue: 0,0:00:05.92,0:00:10.45,Default,,0000,0000,0000,,For instance, in the game of basketball,\Nwhen the ball goes through the hoop.
Dialogue: 0,0:00:10.45,0:00:12.94,Default,,0000,0000,0000,,The shooting team gets points.
Dialogue: 0,0:00:12.94,0:00:16.11,Default,,0000,0000,0000,,The event is the ball\Ngoing through the hoop.
Dialogue: 0,0:00:16.11,0:00:19.06,Default,,0000,0000,0000,,The resulting action is that\Nthe scoring team gets points.
Dialogue: 0,0:00:20.23,0:00:22.07,Default,,0000,0000,0000,,The browser has events as well.
Dialogue: 0,0:00:22.07,0:00:25.86,Default,,0000,0000,0000,,Every time you move your mouse,\Nclick on a link,
Dialogue: 0,0:00:25.86,0:00:29.08,Default,,0000,0000,0000,,submit a form, or do anything really,
Dialogue: 0,0:00:29.08,0:00:32.63,Default,,0000,0000,0000,,your browser makes an announcement\Nof the action you just took.
Dialogue: 0,0:00:32.63,0:00:35.66,Default,,0000,0000,0000,,I want to show you what\Nthe browser is actually doing.
Dialogue: 0,0:00:35.66,0:00:37.90,Default,,0000,0000,0000,,Google Chrome provides a handy function.
Dialogue: 0,0:00:37.90,0:00:41.89,Default,,0000,0000,0000,,The monitorEvents function, that will\Nallow you to take a peek under the hood
Dialogue: 0,0:00:41.89,0:00:43.45,Default,,0000,0000,0000,,to see events as they are taking place.
Dialogue: 0,0:00:44.93,0:00:48.49,Default,,0000,0000,0000,,You pass to the function the element\Non the page that you want it to watch
Dialogue: 0,0:00:48.49,0:00:49.02,Default,,0000,0000,0000,,for events.
Dialogue: 0,0:00:50.78,0:00:55.44,Default,,0000,0000,0000,,Now this function can only be used in\Nthe console on the Chrome Dev Tools.
Dialogue: 0,0:00:55.44,0:00:58.42,Default,,0000,0000,0000,,Don't try to use this function\Nin your JavaScript file.
Dialogue: 0,0:00:58.42,0:01:00.95,Default,,0000,0000,0000,,It won't work, and\Nwill cause a reference error.
Dialogue: 0,0:01:00.95,0:01:04.60,Default,,0000,0000,0000,,With that disclaimer out of the way, let\Nme show you the feedback it provides.
Dialogue: 0,0:01:05.66,0:01:08.59,Default,,0000,0000,0000,,So, on this page, you can see,\NI have a simple text field.
Dialogue: 0,0:01:10.21,0:01:13.46,Default,,0000,0000,0000,,First I'll use jQuery to select\Nall the inputs on the page,
Dialogue: 0,0:01:13.46,0:01:15.98,Default,,0000,0000,0000,,then I'll select just\Nthis first one here.
Dialogue: 0,0:01:15.98,0:01:18.86,Default,,0000,0000,0000,,Next I'm going to call\Nthe monitorEvents function and
Dialogue: 0,0:01:18.86,0:01:21.63,Default,,0000,0000,0000,,pass it the variable holding\Nthe first input field.
Dialogue: 0,0:01:22.73,0:01:27.55,Default,,0000,0000,0000,,The monitorEvents function watches\Nthe element for events, and
Dialogue: 0,0:01:27.55,0:01:28.87,Default,,0000,0000,0000,,log them all out.
Dialogue: 0,0:01:28.87,0:01:33.29,Default,,0000,0000,0000,,So, I'll interact with the text field\Nand watch Chrome log out all the events.
Dialogue: 0,0:01:33.29,0:01:36.04,Default,,0000,0000,0000,,As you can see using\Nthe monitorEvents function,
Dialogue: 0,0:01:36.04,0:01:39.31,Default,,0000,0000,0000,,you can observe what the browsers doing\Nwhen you interact with the page elements
Dialogue: 0,0:01:39.31,0:01:40.18,Default,,0000,0000,0000,,in different ways.