Chrome DevTools의 요소에서 발생한 이벤트를 보려면 어떻게합니까?

라이브러리의 페이지에 사용자 정의 가능한 양식 요소가 있습니다. 사용할 이벤트 핸들러를 찾으려고하기 때문에 상호 작용할 때 어떤 JavaScript 이벤트가 발생하는지 확인하고 싶습니다.

Chrome 웹 개발자를 사용하여 어떻게합니까?

• 히트 F12열려있는 개발 도구에
• 소스 탭을 클릭하십시오
• 오른쪽에서 "이벤트 리스너 중단 점"으로 스크롤하고 트리를 펼치십시오.
• 듣고 싶은 이벤트를 클릭하십시오.
• 대상 요소와 상호 작용합니다. 발사하면 디버거에 중단 점이 생깁니다.

마찬가지로 대상 요소를 마우스 오른쪽 버튼으로 클릭하고 "요소 검사"를 선택하십시오. 개발자 프레임의 오른쪽에서 아래로 스크롤하십시오. 맨 아래에는 '이벤트 리스너'가 있습니다. 트리를 확장하여 요소에 첨부 된 이벤트를 확인하십시오. 이것이 버블 링을 통해 처리되는 이벤트에 작동하는지 확실하지 않습니다 (추천하지 않습니다)

monitorEvents 기능을 사용할 수 있습니다 .

요소를 검사하고 ( 표시되는 요소에서 right mouse click→ Inspect또는 ElementsChrome 개발자 도구의 탭으로 이동하여 원하는 요소를 선택) Console탭으로 이동하여 다음을 작성하십시오.

monitorEvents($0)

이제이 요소 위로 마우스를 가져 가거나 초점을 맞추거나 클릭하면 시작된 이벤트의 이름이 해당 데이터와 함께 표시됩니다.

이 데이터를 얻는 것을 멈추려면 이것을 콘솔에 쓰십시오.

unmonitorEvents($0)

$0Chrome 개발자 도구에서 선택한 마지막 DOM 요소입니다. 다른 DOM 객체를 전달할 수 있습니다 (예 : getElementById또는 querySelector).

또한 이벤트 "type"을 두 번째 매개 변수로 지정하여 모니터 된 이벤트를 사전 정의 된 세트로 좁힐 수 있습니다. 예를 들면 다음과 같습니다.

monitorEvents(document.body, 'mouse')

사용 가능한 유형 목록은 여기에 있습니다 .

이 기능이 어떻게 작동하는지 보여주는 작은 gif를 만들었습니다.

비주얼 이벤트 는 요소의 이벤트 핸들러를 보는 데 사용할 수있는 멋진 북마크입니다. 온라인 데모는 여기에서 볼 수 있습니다 .

jQuery (최소 버전 1.11.2)의 경우 다음 절차가 효과적이었습니다.

1. 요소를 마우스 오른쪽 버튼으로 클릭하고 'Chrome 개발자 도구'를 엽니 다.
2. 입력 $._data(($0), 'events');'콘솔'에서
3. 첨부 된 오브젝트를 펼치고 handler:값을 두 번 클릭하십시오 .
4. 첨부 된 기능의 소스 코드가 표시되며 '검색'탭을 사용하여 그 일부를 검색하십시오.

그리고 바퀴 재발 명을 멈추고 바닐라 JS 이벤트를 사용하기 시작할 때입니다 ... :)

jquery 플러그인 인 경우 스크립트에서 생성 할 수있는 것과 같은 사용자 지정 이벤트는 표시되지 않습니다. 예를 들면 다음과 같습니다.

jQuery(function($){
 var ThingName="Something";

 $("body a").live('click', function(Event){
   var $this = $(Event.target);
       $this.trigger(ThingName + ":custom-event-one");
 });

 $.on(ThingName + ":custom-event-one", function(Event){
   console.log(ThingName, "Fired Custom Event: 1", Event);
 })

});

Chrome 개발자 도구의 스크립트 아래에있는 이벤트 패널에 "Something : custom-event-one"이 표시되지 않습니다