[Javascript] 이벤트 핸들러 함수 보기

[출처] http://stackoverflow.com/questions/570960/how-to-debug-javascript-jquery-event-bindings-with-firebug-or-similar-tool

See jQuery.fn.data (where jQuery stores your handler internally).

• jQuery 1.8.x

  var clickEvents = $._data($('#foo')[0], "events").click;
  jQuery.each(clickEvents, function(key, handlerObj) {
    console.log(handlerObj.handler) // prints "function() { console.log('clicked!') }"
  })

나는 jquery-1.11.1.js 으로 실행 중인데, 웹 브라우저(Chrome, IE)의 console 창에 아래와 같이 실행시키면 

$('.dropdown a') 태그에 걸린 focus 이벤트 핸들러 함수를 출력한다.

var focusEvents = $._data($('.dropdown a')[0], "events").focus;

jQuery.each(focusEvents, function(key, handlerObj) { console.log(handlerObj.handler) })

Visual Event

There's a nice bookmarklet called Visual Event that can show you all the events attached to an element. It has color-coded highlights for different types of events (mouse, keyboard, etc.). When you hover over them, it shows the body of the event handler, how it was attached, and the file/line number (on WebKit and Opera). You can also trigger the event manually.

It can't find every event because there's no standard way to look up what event handlers are attached to an element, but it works with popular libraries like jQuery, Prototype, MooTools, YUI, etc.

[Homepage] http://www.sprymedia.co.uk/article/Visual+Event+2

Chrome 브라우저에서 북마크바를 보이게 하고, 위 홈페이지의 본문 중에 있는 Install 항목에서 Visual Event 항목을 마우스로 Drag 해서 북마크바로 가져가면 설치는 완료된다.

이벤트를 조사하고자 하는 웹페이지로 Chrome 브라우저에서 열고, 북마크바에서 Visual Event를 클릭하기만 하면 이벤트가 걸린 태그를 보여주고, 이벤트 핸들러 함수의 내용과 함수가 정의된 소스 파일과 위치까지 보여준다.

매우 신기하기는 하지만 jQuery로 focus 이벤트를 건 것은 보여주지 않았다.

EventBug

http://www.softwareishard.com/blog/category/eventbug/

How To Find Events Bound To An Element With jQuery

http://www.paulund.co.uk/events-bound-to-element-jquery

Debugging JS events with firebug

http://stackoverflow.com/questions/718795/debugging-js-events-with-firebug

Track events using Chrome javascript debugger

http://stackoverflow.com/questions/7054708/track-events-using-chrome-javascript-debugger

Quickly finding and debugging jQuery event handlers with findHandlersJS

https://blinkingcaret.wordpress.com/2014/01/17/quickly-finding-and-debugging-jquery-event-handlers/

https://github.com/ruidfigueiredo/findHandlersJS