[javascript] 디버깅 할 때 또는 JavaScript 코드에서 DOM 노드에서 이벤트 리스너를 찾는 방법은 무엇입니까?

이벤트가 첨부되는 방법에 따라 다릅니다. 설명을 위해 다음과 같은 클릭 핸들러가 있습니다.

var handler = function() { alert('clicked!') };

우리는 다른 방법을 사용하여 요소에 첨부 할 것입니다. 일부는 검사를 허용하고 일부는 허용하지 않습니다.

방법 A) 단일 이벤트 핸들러

element.onclick = handler;
// inspect
alert(element.onclick); // alerts "function() { alert('clicked!') }"

방법 B) 다중 이벤트 핸들러

if(element.addEventListener) { // DOM standard
    element.addEventListener('click', handler, false)
} else if(element.attachEvent) { // IE
    element.attachEvent('onclick', handler)
}
// cannot inspect element to find handlers

방법 C) : jQuery

$(element).click(handler);

• 1.3.x

  // inspect
  var clickEvents = $(element).data("events").click;
  jQuery.each(clickEvents, function(key, value) {
      alert(value) // alerts "function() { alert('clicked!') }"
  })
  

• 1.4.x (핸들러를 객체 안에 저장)

  // inspect
  var clickEvents = $(element).data("events").click;
  jQuery.each(clickEvents, function(key, handlerObj) {
      alert(handlerObj.handler) // alerts "function() { alert('clicked!') }"
      // also available: handlerObj.type, handlerObj.namespace
  })
  

^{( jQuery.fn.data와 참조 jQuery.data)}

방법 D) : 프로토 타입 (지저분한)

$(element).observe('click', handler);

• 1.5.x

  // inspect
  Event.observers.each(function(item) {
      if(item[0] == element) {
          alert(item[2]) // alerts "function() { alert('clicked!') }"
      }
  })
  

• 1.6에서 1.6.0.3 (포함) (매우 어려움)

  // inspect. "_eventId" is for < 1.6.0.3 while 
  // "_prototypeEventID" was introduced in 1.6.0.3
  var clickEvents = Event.cache[element._eventId || (element._prototypeEventID || [])[0]].click;
  clickEvents.each(function(wrapper){
      alert(wrapper.handler) // alerts "function() { alert('clicked!') }"
  })
  

• 1.6.1 (약간 양호)

  // inspect
  var clickEvents = element.getStorage().get('prototype_event_registry').get('click');
  clickEvents.each(function(wrapper){
      alert(wrapper.handler) // alerts "function() { alert('clicked!') }"
  })
  

답변

function reportIn(e){
    var a = this.lastListenerInfo[this.lastListenerInfo.length-1];
    console.log(a)
}


HTMLAnchorElement.prototype.realAddEventListener = HTMLAnchorElement.prototype.addEventListener;

HTMLAnchorElement.prototype.addEventListener = function(a,b,c){
    this.realAddEventListener(a,reportIn,c);
    this.realAddEventListener(a,b,c);
    if(!this.lastListenerInfo){  this.lastListenerInfo = new Array()};
    this.lastListenerInfo.push({a : a, b : b , c : c});
};

getEventListeners(document.getElementByID('btnlogin'));
getEventListeners($('#btnlogin'));

$(selector).data("events")

$._data(element, "events")

var $myLink = $('a.myClass');
console.log($._data($myLink[0], "events").click);