모든 DOM 요소에 대해 첨부 된 이벤트 핸들러 검사

모든 DOM 요소에 대해 첨부 된 이벤트 핸들러 검사

---

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에서 크롬이를 발사

---

Chrome 개발자 도구는 최근 자바 스크립트 이벤트 모니터링을 위한 몇 가지 새로운 도구를 발표했습니다 .

TL; DR

를 사용하여 특정 유형의 이벤트를 수신합니다 monitorEvents().

unmonitorEvents()듣기를 중지하는 데 사용 합니다.

를 사용하여 DOM 요소의 리스너를 가져옵니다 getEventListeners().

이벤트 리스너 검사기 패널을 사용하여 이벤트 리스너에 대한 정보를 가져옵니다.

맞춤 이벤트 찾기

제 필요에 따라 타사 코드에서 사용자 정의 JS 이벤트를 발견하면 다음 두 가지 버전 getEventListeners()이 놀랍도록 도움이되었습니다.

• getEventListeners(window)
• getEventListeners(document)

이벤트 리스너가 연결된 DOM 노드를 알고 있다면 window또는 대신 전달합니다 document.

알려진 이벤트

예 click를 들어 문서 본문 에서 모니터링하려는 이벤트를 알고있는 경우 다음을 사용할 수 있습니다 monitorEvents(document.body, 'click');..

You should now start seeing all the click events on the document.body being logged in the console.

---

You can view directly attached events (element.onclick = handler) by looking at the DOM. You can view jQuery-attached events in Firefox using FireBug with FireQuery. There doesn't appear to be any way to see addEventListener-added events using FireBug. However, you can see them in Chrome using the Chrome debugger.

---

You can use Visual Event by Allan Jardine to inspect all the currently attached event handlers from several major JavaScript libraries on your page. It works with jQuery, YUI and several others.

Visual Event is a JavaScript bookmarklet so is compatible with all major browsers.

---

이벤트 리스너를 추적하기 위해 자바 스크립트 환경을 확장 할 수 있습니다. 이후 추가 된 이벤트 리스너의 기록을 유지할 수있는 일부 코드로 네이티브 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);
}

참고 URL : https://stackoverflow.com/questions/2623118/inspect-attached-event-handlers-for-any-dom-element