Chrome DevTools를 사용하여 요소에서 발생한 이벤트를 보려면 어떻게 해야 합니까?

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

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

Chrome Web Developer를 사용하여 다음 단계를 실행하세요.

1. 요소 검사:

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

2. 이벤트 모니터링:

   • monitorEvents 사용:

     • "콘솔" 탭을 엽니다.
     • 다음에 monitorEvents($0)를 입력합니다. 여기서 $0은 선택한 요소를 나타냅니다.

   • 이벤트 유형 지정:

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

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

3. 모니터링 중지:

   • 이벤트 모니터링을 중단하려면 다음 위치에 unmonitorEvents($0)를 입력하세요.

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

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

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

위 내용은 Chrome DevTools를 사용하여 요소에서 발생한 이벤트를 보려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!