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

일부 이벤트 리스너가 입력 상자 및 선택 상자에 첨부 된 페이지가 있습니다. 어떤 이벤트 리스너가 특정 DOM 노드를 관찰하고 어떤 이벤트를 감시하는지 알 수있는 방법이 있습니까?

이벤트는 다음을 사용하여 첨부됩니다.

1. 프로토 타입 Event.observe ;
2. DOM addEventListener;
3. 요소 속성으로 element.onclick.

페이지에서 무슨 일이 일어나고 있는지 검사해야하는 경우 시각적 이벤트 책갈피를 사용해보십시오 .

업데이트 : Visual Event 2를 사용할 수 있습니다.

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

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!') }"
  })
  

getEventListeners(domElement)개발자 도구 콘솔에서 Chrome, Firefox, Vivaldi 및 Safari가 지원 됩니다.

대부분의 디버깅 목적으로이를 사용할 수 있습니다.

https://developers.google.com/web/tools/chrome-devtools/console/utilities#geteventlisteners 는 다음과 같이 사용하면 좋습니다.

Chrome 또는 Safari 브라우저의 WebKit Inspector가 이제이 작업을 수행합니다. 요소 창에서 DOM 요소를 선택하면 DOM 요소의 이벤트 리스너가 표시됩니다.

모든 이벤트 리스너 를 JavaScript 로 나열 할 수 있습니다 . 그렇게 어렵지는 않습니다. 리스너 를 추가 하기 전에prototype HTML 요소의 메소드 를 해킹하면 됩니다.

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});
};

이제 모든 앵커 요소 ( a) lastListenerInfo에는 모든 리스너가 포함 된 속성 이 있습니다 . 또한 익명 함수로 리스너를 제거하는 데에도 효과적입니다.

Chrome 에서 getEventListeners 사용 :

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

( 이 질문 과 관련 이 있으므로 여기 에서 답변을 다시 작성 하십시오.)

디버깅 할 때 이벤트를보고 싶다면 다음 중 하나를 권장합니다 ...

1. 비주얼 이벤트
2. 요소 크롬의 개발자 도구 섹션 : (파이어 폭스에서 유사) 우측 하단의 "이벤트 리스너"에 대한 요소와 모양을 선택

코드에서 이벤트를 사용하고 버전 1.8 이전의 jQuery를 사용하는 경우 다음을 사용할 수 있습니다.

$(selector).data("events")

이벤트를 얻을 수 있습니다. 버전 1.8부터 .data ( "events") 사용이 중단되었습니다 ( 이 버그 티켓 참조 ). 당신이 사용할 수있는:

$._data(element, "events")

다른 예 : 콘솔에 대한 특정 링크의 모든 클릭 이벤트를 작성하십시오.

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

( 작동 예는 http://jsfiddle.net/HmsQC/ 참조 )

불행히도 $ ._ data를 사용 하면 내부 jQuery 구조이므로 향후 릴리스에서 변경 될 수 있으므로 디버깅을 제외하고 는 권장하지 않습니다 . 불행히도 나는 이벤트에 액세스하는 다른 쉬운 방법이 없다는 것을 알고 있습니다.

1 : Prototype.observeElement.addEventListener 사용 ( 소스 코드 참조 )

2 : Element.addEventListener추가 된 리스너를 기억하도록 재정의 할 수 있습니다 ( EventListenerListDOM3 스펙 제안에서 유용한 특성 이 제거됨). 이벤트가 연결되기 전에이 코드를 실행하십시오.

(function() {
  Element.prototype._addEventListener = Element.prototype.addEventListener;
  Element.prototype.addEventListener = function(a,b,c) {
    this._addEventListener(a,b,c);
    if(!this.eventListenerList) this.eventListenerList = {};
    if(!this.eventListenerList[a]) this.eventListenerList[a] = [];
    this.eventListenerList[a].push(b);
  };
})();

다음을 통해 모든 이벤트를 읽으십시오.

var clicks = someElement.eventListenerList.click;
if(clicks) clicks.forEach(function(f) {
  alert("I listen to this function: "+f.toString());
});

그리고 Element.removeEventListenercustom에서 이벤트를 제거 하기 위해 재정의 하는 것을 잊지 마십시오 Element.eventListenerList.

3 : 본 Element.onclick숙소는 특별한주의가 필요합니다 :

if(someElement.onclick)
  alert("I also listen tho this: "+someElement.onclick.toString());

4 : Element.onclickcontent 속성을 잊지 마십시오 : 이들은 서로 다른 두 가지입니다 :

someElement.onclick = someHandler; // IDL attribute
someElement.setAttribute("onclick","otherHandler(event)"); // content attribute

따라서 처리해야합니다.

var click = someElement.getAttribute("onclick");
if(click) alert("I even listen to this: "+click);

가장 인기있는 답변에서 언급 한 Visual Event 책갈피는 사용자 지정 라이브러리 처리기 캐시 만 훔칩니다.

특정 요소에 어떤 이벤트 리스너가 연결되어 있는지 확인하기 위해 W3C 권장 DOM 인터페이스에서 제공하는 표준 방법이 없음이 밝혀졌습니다. 이것이 감독 인 것처럼 보이지만 eventListenerList라는 속성을 레벨 3 DOM 사양에 포함시키는 제안이 있었지만 불행히도 이후 초안에서는 제거되었습니다. 따라서 우리는 일반적으로 첨부 된 이벤트의 캐시를 유지하는 개별 Javascript 라이브러리를 살펴 봐야합니다 (따라서 나중에 제거하고 다른 유용한 추상화를 수행 할 수 있습니다).

따라서 Visual Event가 이벤트를 표시하려면 Javascript 라이브러리에서 이벤트 정보를 구문 분석 할 수 있어야합니다.

요소 재정의에 의문이 생길 수 있습니다 (즉, JS로 코딩 할 수없는 라이브 컬렉션과 같은 DOM 특정 기능이 있기 때문에). ).

이벤트 리스너를 관리하기 위해 네이티브 DOM 메소드를 랩핑하여 맨 위에 배치 할 수 있습니다 <head>.

<script>
    (function(w){
        var originalAdd = w.addEventListener;
        w.addEventListener = function(){
            // add your own stuff here to debug
            return originalAdd.apply(this, arguments);
        };

        var originalRemove = w.removeEventListener;
        w.removeEventListener = function(){
            // add your own stuff here to debug
            return originalRemove.apply(this, arguments);
        };
    })(window);
</script>

H / T @ les2

이제 Firefox 개발자 도구가이를 수행합니다. jQuery 및 DOM 이벤트를 포함하여 각 요소의 디스플레이 오른쪽에있는 "ev"버튼을 클릭하면 이벤트가 표시됩니다 .

당신이있는 경우 방화범을 , 당신이 사용할 수있는 console.dir(object or array)자바 스크립트 스칼라, 배열 또는 객체의 콘솔 로그에 좋은 나무를 인쇄 할 수 있습니다.

시험:

console.dir(clickEvents);

또는

console.dir(window);

Jan Turon의 답변을 기반으로 한 완벽한 작업 솔루션 - getEventListeners()콘솔에서 와 같이 작동합니다 .

(복제본에 약간의 버그가 있습니다. 어쨌든 크게 깨지지 않습니다.)

(function() {
  Element.prototype._addEventListener = Element.prototype.addEventListener;
  Element.prototype.addEventListener = function(a,b,c) {
    if(c==undefined)
      c=false;
    this._addEventListener(a,b,c);
    if(!this.eventListenerList)
      this.eventListenerList = {};
    if(!this.eventListenerList[a])
      this.eventListenerList[a] = [];
    //this.removeEventListener(a,b,c); // TODO - handle duplicates..
    this.eventListenerList[a].push({listener:b,useCapture:c});
  };

  Element.prototype.getEventListeners = function(a){
    if(!this.eventListenerList)
      this.eventListenerList = {};
    if(a==undefined)
      return this.eventListenerList;
    return this.eventListenerList[a];
  };
  Element.prototype.clearEventListeners = function(a){
    if(!this.eventListenerList)
      this.eventListenerList = {};
    if(a==undefined){
      for(var x in (this.getEventListeners())) this.clearEventListeners(x);
        return;
    }
    var el = this.getEventListeners(a);
    if(el==undefined)
      return;
    for(var i = el.length - 1; i >= 0; --i) {
      var ev = el[i];
      this.removeEventListener(a, ev.listener, ev.useCapture);
    }
  };

  Element.prototype._removeEventListener = Element.prototype.removeEventListener;
  Element.prototype.removeEventListener = function(a,b,c) {
    if(c==undefined)
      c=false;
    this._removeEventListener(a,b,c);
      if(!this.eventListenerList)
        this.eventListenerList = {};
      if(!this.eventListenerList[a])
        this.eventListenerList[a] = [];

      // Find the event in the list
      for(var i=0;i<this.eventListenerList[a].length;i++){
          if(this.eventListenerList[a][i].listener==b, this.eventListenerList[a][i].useCapture==c){ // Hmm..
              this.eventListenerList[a].splice(i, 1);
              break;
          }
      }
    if(this.eventListenerList[a].length==0)
      delete this.eventListenerList[a];
  };
})();

용법:

someElement.getEventListeners([name]) -이름이 설정되어있는 경우, 이벤트 리스너의 반환 목록

someElement.clearEventListeners([name]) -이름이 설정된 경우 모든 이벤트 리스너를 제거하십시오. 해당 이벤트에 대한 리스너 만 제거하십시오.

Opera 12 (최신 Chrome 웹킷 엔진 기반이 아님) Dragonfly 는이를 잠시 동안 가지고 있었고 분명히 DOM 구조로 표시되었습니다. 내 의견으로는 그것은 우수한 디버거이며 여전히 Opera 12 기반 버전을 사용하는 이유는 남아있는 유일한 이유입니다 (v13, v14 버전이 없으며 v15 Webkit 기반에는 여전히 Dragonfly가 없습니다)

프로토 타입 1.7.1 방법

function get_element_registry(element) {
    var cache = Event.cache;
    if(element === window) return 0;
    if(typeof element._prototypeUID === 'undefined') {
        element._prototypeUID = Element.Storage.UID++;
    }
    var uid =  element._prototypeUID;           
    if(!cache[uid]) cache[uid] = {element: element};
    return cache[uid];
}

나는 최근에 이벤트를 다루고 있었고 페이지의 모든 이벤트를 보거나 제어하고 싶었습니다. 가능한 솔루션을 살펴본 후, 나는 나 자신의 길을 가고 이벤트를 모니터링 할 사용자 지정 시스템을 만들기로 결정했습니다. 그래서 저는 세 가지 일을했습니다.

먼저 페이지의 모든 이벤트 리스너에 대한 컨테이너가 필요했습니다. 이것이 바로 EventListeners객체입니다. 그것은 세 가지 유용한 방법이 있습니다 add(), remove()하고 get().

다음으로, 나는 만든 EventListener이벤트에 대한 필요한 정보를 보유하는 개체를 예 : target, type, callback, options, useCapture, wantsUntrusted, 및 방법 추가 remove()리스너를 제거합니다.

마지막으로, 내가 만든 객체 ( 및 )에서 작동하도록 기본 addEventListener()및 removeEventListener()메소드를 확장했습니다 .EventListenerEventListeners

용법:

var bodyClickEvent = document.body.addEventListener("click", function () {
    console.log("body click");
});

// bodyClickEvent.remove();

addEventListener()EventListener객체를 생성하고 객체에 추가 EventListeners하고 EventListener객체를 반환 하므로 나중에 제거 할 수 있습니다.

EventListeners.get()페이지에서 리스너를 보는 데 사용할 수 있습니다. EventTarget또는 문자열 (이벤트 유형)을 허용합니다 .

// EventListeners.get(document.body);
// EventListeners.get("click");

데모

이 현재 페이지의 모든 이벤트 리스너를 알고 싶다고 가정 해 봅시다. 그렇게 할 수 있습니다 (이 경우 스크립트 관리자 확장명 Tampermonkey를 사용한다고 가정). 다음 스크립트가이를 수행합니다.

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @include      https://stackoverflow.com/*
// @grant        none
// ==/UserScript==

(function() {
    fetch("https://raw.githubusercontent.com/akinuri/js-lib/master/EventListener.js")
        .then(function (response) {
            return response.text();
        })
        .then(function (text) {
            eval(text);
            window.EventListeners = EventListeners;
        });
})(window);

모든 리스너를 나열하면 299 개의 이벤트 리스너가 있다고합니다. 복제본이있는 것 같지만 실제로 복제본인지 모르겠습니다. 모든 이벤트 유형이 중복되는 것은 아니므로 모든 "중복"은 개별 리스너 일 수 있습니다.

내 저장소 에서 코드를 찾을 수 있습니다 . 다소 길어서 여기에 게시하고 싶지 않았습니다.

업데이트 : 이것은 jQuery에서 작동하지 않는 것 같습니다. EventListener를 살펴보면 콜백이

function(b){return"undefined"!=typeof r&&r.event.triggered!==b.type?r.event.dispatch.apply(a,arguments):void 0}

나는 이것이 jQuery에 속하고 실제 콜백이 아니라고 생각합니다. jQuery는 실제 콜백을 EventTarget의 속성에 저장합니다.

$(document.body).click(function () {
    console.log("jquery click");
});

이벤트 리스너를 제거하려면 실제 콜백을 removeEventListener()메소드에 전달해야합니다 . 따라서 jQuery에서이 작업을 수행하려면 추가 수정이 필요합니다. 나중에 고칠 수도 있습니다.

jQuery 2.1에서이 작업을 수행하려고하는데 " $().click() -> $(element).data("events").click;"메서드로는 작동하지 않습니다.

필자의 경우 $ ._ data () 함수 만 작동한다는 것을 깨달았습니다.

	$(document).ready(function(){

		var node = $('body');
		
        // Bind 3 events to body click
		node.click(function(e) { alert('hello');  })
			.click(function(e) { alert('bye');  })
			.click(fun_1);

        // Inspect the events of body
		var events = $._data(node[0], "events").click;
		var ev1 = events[0].handler // -> function(e) { alert('hello')
		var ev2 = events[1].handler // -> function(e) { alert('bye')
		var ev3 = events[2].handler // -> function fun_1()
        
		$('body')
			.append('<p> Event1 = ' + eval(ev1).toString() + '</p>')
			.append('<p> Event2 = ' + eval(ev2).toString() + '</p>')
			.append('<p> Event3 = ' + eval(ev3).toString() + '</p>');        
	
	});

	function fun_1() {
		var txt = 'text del missatge';	 
		alert(txt);
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
</body>

멋진 jQuery Events 확장이 있습니다 .

(주제 소스 )

이 함수를 변경하면 추가 된 리스너를 기록 할 수 있습니다.

EventTarget.prototype.addEventListener
EventTarget.prototype.attachEvent
EventTarget.prototype.removeEventListener
EventTarget.prototype.detachEvent

나머지 청취자들과 함께

console.log(someElement.onclick);
console.log(someElement.getAttribute("onclick"));