현실에서의 이벤트는
특정한 때에 발생하는 특정한 행동을 말합니다
예를 들면 농구에서는 농구공이 고리를 통과하면
슈팅한 팀이 득점을 하죠
이벤트는 공이 고리를 통과한 걸 가리킵니다
결과는 슈팅한 팀이 득점을 한 것이죠
브라우저도 이벤트가 있습니다
마우스를 움직일 때나 링크를 클릭할 때
양식을 제출할 때나 아니면 사실상 뭐든지 간에
브라우저는 여러분의 행동에 대한 안내를 하죠
저는 여러분께 브라우저가 실제로 뭘 하는 건지
보여드리려고 합니다
구글 크롬은 아주 편리한 함수를 제공하죠
monitorEvents() 함수는 이벤트가 발생할 때
내부적으로 어떤 일이 일어나는지 보여줍니다
여러분은 해당 이벤트에서 관찰하고 싶은 요소를
함수에 보내면 됩니다
이 함수는 오직 크롬 개발자 도구의 콘솔에서만
사용될 수 있어요
그러니까 자바스크립트 파일에서
이 함수를 사용하려고 하지 마세요
작동도 안 할 뿐더러 오류를 유발하거든요
이 부분을 말씀드렸으니
이제 이게 제공하는 피드백들을 보여드리죠
보시듯이 페이지에는 간단한 텍스트 필드가 있네요
먼저 jQuery로 페이지의 모든 인풋 요소들을 선택할게요
그리고 이 첫 번째 걸 여기서 선택할게요
그리고는 monitorEvents()을 호출하고
첫 번째 인풋 필드가 있는 변수를 보낼게요
monitorEvents() 함수는 이벤트 요소들을 관찰하고
모든 걸 기록해요
그러니까 저는 텍스트 필드와 상호작용 하고
크롬이 이벤트를 기록하는 걸 보는거죠
보시는 것처럼 monitorEvents() 함수를 쓰면
여러분이 페이지 요소들과 상호작용 할 때
브라우저가 무엇을 하는지 관찰할 수 있어요