0:00:00.240,0:00:04.780
현실에서의 이벤트는 [br]특정한 때에 발생하는 특정한 행동을 말합니다

0:00:05.920,0:00:10.450
예를 들면 농구에서는 농구공이 고리를 통과하면

0:00:10.450,0:00:12.940
슈팅한 팀이 득점을 하죠

0:00:12.940,0:00:16.110
이벤트는 공이 고리를 통과한 걸 가리킵니다

0:00:16.110,0:00:19.469
결과는 슈팅한 팀이 득점을 한 것이죠

0:00:20.230,0:00:22.070
브라우저도 이벤트가 있습니다

0:00:22.070,0:00:25.860
마우스를 움직일 때나 링크를 클릭할 때

0:00:25.860,0:00:29.080
양식을 제출할 때나 아니면 사실상 뭐든지 간에

0:00:29.080,0:00:32.630
브라우저는 여러분의 행동에 대한 안내를 하죠

0:00:32.630,0:00:35.660
저는 여러분께 브라우저가 실제로 뭘 하는 건지 [br]보여드리려고 합니다

0:00:35.660,0:00:37.902
구글 크롬은 아주 편리한 함수를 제공하죠

0:00:37.902,0:00:41.890
monitorEvents() 함수는 이벤트가 발생할 때

0:00:41.890,0:00:44.070
내부적으로 어떤 일이 일어나는지 보여줍니다

0:00:44.930,0:00:49.360
여러분은 해당 이벤트에서 관찰하고 싶은 요소를 [br]함수에 보내면 됩니다

0:00:50.620,0:00:55.440
이 함수는 오직 크롬 개발자 도구의 콘솔에서만[br]사용될 수 있어요

0:00:55.440,0:00:58.420
그러니까 자바스크립트 파일에서 [br]이 함수를 사용하려고 하지 마세요

0:00:58.420,0:01:00.950
작동도 안 할 뿐더러 오류를 유발하거든요

0:01:00.950,0:01:04.599
이 부분을 말씀드렸으니 [br]이제 이게 제공하는 피드백들을 보여드리죠

0:01:05.660,0:01:09.170
보시듯이 페이지에는 간단한 텍스트 필드가 있네요

0:01:10.210,0:01:13.460
먼저 jQuery로 페이지의 모든 인풋 요소들을 선택할게요

0:01:13.460,0:01:15.980
그리고 이 첫 번째 걸 여기서 선택할게요

0:01:15.980,0:01:18.865
그리고는 monitorEvents()을 호출하고

0:01:18.865,0:01:21.630
첫 번째 인풋 필드가 있는 변수를 보낼게요

0:01:22.732,0:01:27.550
monitorEvents() 함수는 이벤트 요소들을 관찰하고

0:01:27.550,0:01:28.870
모든 걸 기록해요

0:01:28.870,0:01:33.290
그러니까 저는 텍스트 필드와 상호작용 하고[br]크롬이 이벤트를 기록하는 걸 보는거죠

0:01:33.290,0:01:36.040
보시는 것처럼 monitorEvents() 함수를 쓰면

0:01:36.040,0:01:40.530
여러분이 페이지 요소들과 상호작용 할 때 [br]브라우저가 무엇을 하는지 관찰할 수 있어요