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

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

라이브러리의 페이지에 커스터마이즈 가능한 폼 요소가 있습니다.어떤 이벤트 핸들러를 사용할지 고민하고 있기 때문에, javascript 이벤트와 대화할 때 어떤 이벤트가 발생하는지 보고 싶습니다.

Chrome Web Developer를 사용하여 어떻게 하면 됩니까?

• 개발 도구를 열려면 누르십시오.
• 소스 탭을 클릭합니다.
• 오른쪽에서 "Event Listener Breakpoints(이벤트 수신기 중단점)"까지 스크롤하여 트리를 펼칩니다.
• 듣고 싶은 이벤트를 클릭합니다.
• 대상 요소와 상호 작용합니다. 대상 요소가 작동하면 디버거에서 중단점을 얻을 수 있습니다.

마찬가지로 타깃 요소를 우클릭할 수 있습니다.-> [ inspect element ]를 선택합니다.개발 프레임의 우측에서 아래로 스크롤 합니다.아래쪽은 '이벤트 리스너'입니다.트리를 확장하여 요소에 연결된 이벤트를 확인합니다.버블링을 통해 처리되는 이벤트에 대해 이 방법이 효과가 있는지 확실하지 않습니다(그렇지 않을 것 같습니다).

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

요소를 검사하기만 하면 됩니다(right mouse click→Inspect가시적인 요소로 이동하거나 로 이동한다.Elements[ Chrome Developer Tools ](크롬 개발자 도구)에서 탭을 누르고 원하는 요소를 선택한 다음 로 이동합니다.Console탭 및 쓰기:

monitorEvents($0)

이제 마우스를 이 요소 위로 이동하거나 포커스를 맞추거나 클릭하면 발생한 이벤트의 이름이 해당 데이터와 함께 표시됩니다.

이 데이터 가져오기를 중지하려면 콘솔에 다음을 기록하십시오.

unmonitorEvents($0)

$0 는 Chrome Developer Tools에서 선택한 마지막 DOM 요소입니다.다른 임의의 DOM 오브젝트를 전달할 수 있습니다(예를 들어,getElementById또는querySelector).

또한 이벤트 "type"을 두 번째 매개 변수로 지정하여 모니터링되는 이벤트를 미리 정의된 세트로 좁힐 수도 있습니다.예를 들어 다음과 같습니다.

monitorEvents(document.body, 'mouse')

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

이 기능의 구조를 나타내는 작은 gif를 작성했습니다.

Visual Event는 요소의 이벤트 핸들러를 표시하는 데 사용할 수 있는 작은 북마크렛입니다.온라인 데모는 이쪽에서 보실 수 있습니다.

jQuery(최소 버전 1.11.2)의 경우 다음 절차가 도움이 되었습니다.

1. 요소를 마우스 오른쪽 버튼으로 클릭하고 'Chrome Developer Tools'를 엽니다.
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"이 표시되지 않습니다.

언급URL : https://stackoverflow.com/questions/10213703/how-do-i-view-events-fired-on-an-element-in-chrome-devtools