DOM 요소의 이벤트에 첨부 된 함수 / 코드를 볼 수있는 방법이 있습니까? Firebug 또는 기타 도구 사용.
답변:
기존 element.onclick= handler또는 HTML을 사용하여 첨부 된 이벤트 핸들러 는 스크립트 또는 <element onclick="handler">인디 element.onclick버거 의 속성에서 간단하게 검색 할 수 있습니다 .
DOM 레벨 2 이벤트 addEventListener메소드와 IE를 사용하여 첨부 된 이벤트 핸들러 attachEvent는 현재 스크립트에서 전혀 검색 할 수 없습니다. DOM 레벨 3은 한때 element.eventListenerList모든 리스너를 얻기 위해 제안 되었지만 이것이 최종 사양에 도달할지 여부는 명확하지 않습니다. 오늘날 브라우저에는 구현이 없습니다.
브라우저 확장 기능인 디버깅 도구는 이러한 종류의 리스너에 액세스 할 수 있지만 실제로 수행하는 작업에 대해서는 잘 모릅니다.
일부 JS 프레임 워크는 자신이 무엇을하고 있는지 알아 내기 위해 이벤트 바인딩 기록을 충분히 남깁니다. Visual Event 는이 접근 방식을 사용하여 몇 가지 인기있는 프레임 워크를 통해 등록 된 리스너를 검색합니다.
Chrome 개발자 도구 의 Elements Panel은 2011 년 중반에 Chrome이 출시되고 2010 년부터 Chrome 개발자 채널이 출시 된 이후로이 기능이있었습니다.
또한 선택한 노드에 대해 표시되는 이벤트 리스너 는 캡처 및 버블 링 단계를 통해 실행 되는 순서대로되어 있습니다.
히트 command+ option+ i맥 OSX에와 Ctrl+ Shift+ iWindows에서 크롬이를 발사
window와 같은 객체 의 이벤트를 검사 할 수 message있습니까?
Chrome 개발자 도구는 최근 자바 스크립트 이벤트 모니터링을 위한 몇 가지 새로운 도구를 발표했습니다 .
TL; DR
를 사용하여 특정 유형의 이벤트를 수신합니다
monitorEvents().
unmonitorEvents()듣기를 중지하는 데 사용 합니다.를 사용하여 DOM 요소의 리스너를 가져옵니다
getEventListeners().이벤트 리스너 검사기 패널을 사용하여 이벤트 리스너에 대한 정보를 가져옵니다.
맞춤 이벤트 찾기
제 필요에 따라 타사 코드에서 사용자 정의 JS 이벤트를 발견하면 다음 두 가지 버전 getEventListeners()이 놀랍도록 도움이되었습니다.
getEventListeners(window)getEventListeners(document)이벤트 리스너가 연결된 DOM 노드를 알고 있다면 window또는 대신 전달합니다 document.
알려진 이벤트
예 click를 들어 문서 본문 에서 모니터링하려는 이벤트를 알고있는 경우 다음을 사용할 수 있습니다 monitorEvents(document.body, 'click');..
이제 document.body콘솔에 로그인되는 모든 클릭 이벤트를보기 시작해야합니다 .
DOM을보고 직접 연결된 이벤트 (element.onclick = 핸들러)를 볼 수 있습니다. FireQuery와 함께 FireBug를 사용하여 Firefox에서 jQuery 첨부 이벤트를 볼 수 있습니다. FireBug를 사용하여 addEventListener가 추가 한 이벤트를 볼 수있는 방법이없는 것 같습니다. 그러나 Chrome 디버거를 사용하여 Chrome에서 볼 수 있습니다.
Allan Jardine의 Visual Event 를 사용 하여 페이지의 여러 주요 JavaScript 라이브러리에서 현재 연결된 모든 이벤트 핸들러를 검사 할 수 있습니다 . jQuery, YUI 및 기타 여러 곳에서 작동합니다.
Visual Event는 JavaScript 북마크릿이므로 모든 주요 브라우저와 호환됩니다.
이벤트 리스너를 추적하기 위해 자바 스크립트 환경을 확장 할 수 있습니다. 이후 추가 된 이벤트 리스너의 기록을 유지할 수있는 일부 코드로 네이티브 addEventListener () 메서드를 래핑 (또는 '오버로드')합니다 . 또한 HTMLElement.prototype.removeEventListener를 확장하여 DOM에서 일어나는 일을 정확하게 반영하는 레코드를 유지해야합니다.
설명을 위해 (예상되지 않은 코드)-이것은 addEventListener를 '래핑'하여 객체 자체에 등록 된 이벤트 리스너의 레코드를 포함하는 방법의 예입니다.
var nativeMethod = HTMLElement.prototype.addEventListener;
HTMLElement.prototype.addEventListener = function (type, listener) {
var el = e.currentTarget;
if(!(el.eventListeners instanceof Array)) { el.eventListeners = []}
el.eventListeners.push({'type':type, 'listener':listener});
nativeMethod.call(el, type, listener);
}