1
00:00:00,240 --> 00:00:04,780
현실에서의 이벤트는 
특정한 때에 발생하는 특정한 행동을 말합니다

2
00:00:05,920 --> 00:00:10,450
예를 들면 농구에서는 농구공이 고리를 통과하면

3
00:00:10,450 --> 00:00:12,940
슈팅한 팀이 득점을 하죠

4
00:00:12,940 --> 00:00:16,110
이벤트는 공이 고리를 통과한 걸 가리킵니다

5
00:00:16,110 --> 00:00:19,469
결과는 슈팅한 팀이 득점을 한 것이죠

6
00:00:20,230 --> 00:00:22,070
브라우저도 이벤트가 있습니다

7
00:00:22,070 --> 00:00:25,860
마우스를 움직일 때나 링크를 클릭할 때

8
00:00:25,860 --> 00:00:29,080
양식을 제출할 때나 아니면 사실상 뭐든지 간에

9
00:00:29,080 --> 00:00:32,630
브라우저는 여러분의 행동에 대한 안내를 하죠

10
00:00:32,630 --> 00:00:35,660
저는 여러분께 브라우저가 실제로 뭘 하는 건지 
보여드리려고 합니다

11
00:00:35,660 --> 00:00:37,902
구글 크롬은 아주 편리한 함수를 제공하죠

12
00:00:37,902 --> 00:00:41,890
monitorEvents() 함수는 이벤트가 발생할 때

13
00:00:41,890 --> 00:00:44,070
내부적으로 어떤 일이 일어나는지 보여줍니다

14
00:00:44,930 --> 00:00:49,360
여러분은 해당 이벤트에서 관찰하고 싶은 요소를 
함수에 보내면 됩니다

15
00:00:50,620 --> 00:00:55,440
이 함수는 오직 크롬 개발자 도구의 콘솔에서만
사용될 수 있어요

16
00:00:55,440 --> 00:00:58,420
그러니까 자바스크립트 파일에서 
이 함수를 사용하려고 하지 마세요

17
00:00:58,420 --> 00:01:00,950
작동도 안 할 뿐더러 오류를 유발하거든요

18
00:01:00,950 --> 00:01:04,599
이 부분을 말씀드렸으니 
이제 이게 제공하는 피드백들을 보여드리죠

19
00:01:05,660 --> 00:01:09,170
보시듯이 페이지에는 간단한 텍스트 필드가 있네요

20
00:01:10,210 --> 00:01:13,460
먼저 jQuery로 페이지의 모든 인풋 요소들을 선택할게요

21
00:01:13,460 --> 00:01:15,980
그리고 이 첫 번째 걸 여기서 선택할게요

22
00:01:15,980 --> 00:01:18,865
그리고는 monitorEvents()을 호출하고

23
00:01:18,865 --> 00:01:21,630
첫 번째 인풋 필드가 있는 변수를 보낼게요

24
00:01:22,732 --> 00:01:27,550
monitorEvents() 함수는 이벤트 요소들을 관찰하고

25
00:01:27,550 --> 00:01:28,870
모든 걸 기록해요

26
00:01:28,870 --> 00:01:33,290
그러니까 저는 텍스트 필드와 상호작용 하고
크롬이 이벤트를 기록하는 걸 보는거죠

27
00:01:33,290 --> 00:01:36,040
보시는 것처럼 monitorEvents() 함수를 쓰면

28
00:01:36,040 --> 00:01:40,530
여러분이 페이지 요소들과 상호작용 할 때 
브라우저가 무엇을 하는지 관찰할 수 있어요