Chrome DevTools를 사용하여 요소에서 실행된 이벤트 보기

웹페이지의 이벤트 처리 문제를 해결하고 최적화하려면 Chrome DevTools를 사용하여 검사할 수 있습니다. 특정 요소에서 실행되는 이벤트.

Chrome 웹을 사용하여 다음 단계를 실행하세요. 개발자:

1. 요소 검사:

   • 대상 요소를 마우스 오른쪽 버튼으로 클릭하고 "검사"를 선택하거나 " DevTools의 Elements' 탭.

2. 모니터 이벤트:

   • 모니터 이벤트 사용:

     • "콘솔" 탭을 엽니다.
     • 모니터 이벤트 입력 ($0) 콘솔에서 여기서 $0은 선택된 항목을 나타냅니다. element.

   • 이벤트 유형 지정:

     • 선택적으로 모니터링하려는 이벤트 유형을 두 번째 인수로 제공합니다. monitorEvents(예: monitorEvents(document.body, 'mouse').

검사된 요소와의 상호작용은 이제 해당 이벤트 이름과 관련 데이터를 표시합니다.

3. 모니터링 중지:

   • 이벤트 모니터링을 중단하려면 다음을 입력하십시오. 콘솔에서 unmonitorEvents($0).

사용 가능한 이벤트 유형(2023-01-30 기준)

범위를 좁힐 수 있습니다. 다음을 지정하여 모니터링되는 이벤트를 종료합니다. 유형:

• 마우스: 마우스 이벤트(아래로, 위로, 클릭 등)
• 키: 키보드 이벤트(아래로, 위로, 클릭 등) 위로, 누르기 등)
• 터치: 터치 이벤트(시작, 이동, 종료, 등)
• control: 요소 제어 이벤트(크기 조정, 포커스, 변경 등)