입문

만약 중도부터 프로젝트에 참가하거나 여러 사람이 삐걱삐걱 js를 쓴다면 어디에서 어떤 활동을 설정했는지 전모를 파악하기 어렵다고 생각합니다.
그래서 나는 현재 페이지의 활동을 대충 확인할 수 있는 코드를 썼다.무슨 쓸모가 있으면 좋겠다.

주의사항

jQuery에 등록된 활동만 대상으로 합니다

addEventListener 등에 등록된 것은 표시되지 않습니다

페이지는 jQuery를 사용해야 합니다

나는 이 코드로 잘 만들지 못하는 페이지도 매우 많다고 생각한다.필요에 따라 적절하게 조정하기를 바랍니다.

코드

jQuery 1.8 이상

jquery의 이벤트를 모두 표시합니다.js

jQuery.noConflict();
jQuery(function($) {
  (function showEventList() {
    var allTags = document.body.getElementsByTagName('*');
    var tag;
    var i = 0;
    var l = allTags.length;
    for (; i < l; i++) {
        tag = $._data(allTags[i], 'events');
        if (tag !== undefined && tag !== null) {
          console.log(allTags[i], tag);
        }
    }
  })();
});

jquery1.8 이하

jquery의 이벤트를 모두 표시합니다.js

jQuery.noConflict();
jQuery(function($) {
  (function showEventList() {
    var allTags = document.body.getElementsByTagName('*');
    var tag;
    var i = 0;
    var l = allTags.length;
    for (; i < l; i++) {
      tag = $(allTags[i]).data('events');
      if (tag !== undefined && tag !== null) {
        console.log(allTags[i], tag);
      }
    }
  })();
});

사용 방법

Chrome Devtools의 Snippets를 등록하고 실행합니다

Devtools의 Console 붙여넣기가 수행됩니다

스크립트에 직접 삽입합니다

여기서 Devtools의 Snippets를 등록하고 실행하려고 합니다.
참조 이미지

지원

상기 코드는 body 이하의 요소를 대상으로 한다.그리고 이제 모든 활동이 드러났다click 이벤트만 보여도 간단하게 할 수 있을 것 같아요.
jQuery 클릭 이벤트만 표시됩니다.js

if (tag !== undefined && tag !== null && tag.click) {
  console.log(allTags[i], tag);
}

참고 자료

jQuery에서 설정한 클릭 이벤트 등을 정의하는 위치를 찾는 방법