Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

이벤트 모니터링

Chrome DevTools Command Line API는 이벤트 리스너를 관찰 및 검사하는 다양한 방법을 제공합니다. 자바스크립트가 대화형 페이지에서 핵심 역할을 하고 브라우저가 이벤트 및 이벤트 핸들러를 디버그하는 유용한 도구를 제공합니다.

TL;DR

  • monitorEvents()를 사용하여 특정 유형의 이벤트를 수신합니다.
  • unmonitorEvents()를 사용하여 수신을 중지합니다.
  • getEventListeners()를 사용하여 DOM 요소의 리스너를 가져옵니다.
  • Event Listeners Inspector 패널을 사용하여 이벤트 리스너에 대한 정보를 가져옵니다.

이벤트 모니터링

monitorEvents() 메서드는 지정된 대상에 정보를 기록하도록 DevTools에 지시합니다.

첫 번째 매개변수는 모니터링할 객체입니다. 모든 이벤트는 두 번째 매개변수가 입력되지 않으면 반환됩니다. 수신할 이벤트를 지정하려면 문자열 또는 문자열 배열을 두 번째 매개변수로 전달하세요.

페이지 본문에서 클릭 이벤트 수신:

monitorEvents(document.body, "click");

모니터링하는 이벤트가 DevTools에서 표준 이벤트 이름 집합으로 매핑되는 지원 이벤트 유형이라면 이 메서드는 해당 유형의 이벤트를 수신합니다.

Command Line API는 대상 이벤트에 대해 완전한 이벤트 유형 매핑을 가지고 있습니다.

이벤트 모니터링을 중단하려면 unmonitorEvents() 메서드를 호출하고 객체에 전달합니다.

body 객체에서 이벤트 수신 중단:

unmonitorEvents(document.body);

객체에 등록된 이벤트 리스너 보기

getEventListeners() API는 지정된 객체에 등록된 이벤트 리스너를 반환합니다.

반환 값은 등록된 각 이벤트 유형(예: click 또는 keydown)에 대한 배열을 포함하는 객체입니다. 각 배열의 멤버는 각 유형에 등록된 리스너를 설명하는 객체입니다. 예를 들어, 다음 코드는 document 객체에 등록된 모든 이벤트 리스너를 나열합니다.

getEventListeners(document);

getEventListeners() 사용 시의 출력

지정된 객체에 리스너를 두 개 이상 등록한 경우 배열이 각 리스너에 대한 구성원을 포함합니다. 다음 예시에는 mousedown 이벤트에 대해 #scrollingList 요소에 등록된 2개의 이벤트 리스너가 있습니다.

mousedown에 첨부된 이벤트 리스너 보기

각 객체를 확장하여 속성을 탐색할 수 있습니다.

리스너 객체의 확장된 뷰

DOM 요소에 등록된 이벤트 리스너 보기

기본적으로 Element Inspector의 Event Listeners 패널은 페이지에 첨부된 모든 이벤트를 보여줍니다.

Event Listeners 패널

이 필터는 선택된 노드로 이벤트를 제한합니다.

선택된 노드로만 필터링된 Event Listeners 패널

객체를 확장하면 패널에 이벤트 리스너 세부정보가 표시됩니다. 이 예시의 페이지에는 jQuery를 통해 첨부된 2개의 이벤트 리스너가 있습니다.

확장된 이벤트 리스너 뷰