Bagaimana menemukan pendengar acara pada simpul DOM saat debugging atau dari kode JavaScript?

Saya memiliki halaman di mana beberapa pendengar acara dilampirkan ke kotak input dan pilih kotak. Apakah ada cara untuk mengetahui pendengar acara mana yang mengamati simpul DOM tertentu dan untuk acara apa?

Acara dilampirkan menggunakan:

1. Prototipe Event.observe ;
2. DOM addEventListener;
3. Sebagai atribut elemen element.onclick.

Jika Anda hanya perlu memeriksa apa yang terjadi pada halaman, Anda dapat mencoba bookmarklet Peristiwa Visual .

Pembaruan : Visual Event 2 tersedia.

Itu tergantung pada bagaimana acara dilampirkan. Sebagai contoh ilustrasi kami memiliki penangan klik berikut:

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

Kami akan melampirkannya ke elemen kami menggunakan metode yang berbeda, beberapa yang memungkinkan inspeksi dan beberapa yang tidak.

Metode A) pengendali kejadian tunggal

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

Metode B) beberapa penangan acara

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

Metode 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 (menyimpan pawang di dalam suatu objek)

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

^{(Lihat jQuery.fn.datadan jQuery.data)}

Metode D): Prototipe (berantakan)

$(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 hingga 1.6.0.3, inklusif (sangat sulit di sini)

  // 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 (sedikit lebih baik)

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

Dukungan Chrome, Firefox, Vivaldi dan Safari getEventListeners(domElement)di konsol Alat Pengembang mereka.

Untuk sebagian besar tujuan debugging, ini bisa digunakan.

Di bawah ini adalah referensi yang sangat baik untuk menggunakannya: https://developers.google.com/web/tools/chrome-devtools/console/utilities#geteventlisteners

Inspektur WebKit di browser Chrome atau Safari sekarang melakukan ini. Ini akan menampilkan pendengar acara untuk elemen DOM ketika Anda memilihnya di panel Elemen.

Dimungkinkan untuk membuat daftar semua pendengar acara dalam JavaScript: Tidak sulit; Anda hanya perlu meretas prototypemetode elemen HTML ( sebelum menambahkan pendengar).

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

Sekarang setiap elemen jangkar ( a) akan memiliki lastListenerInfoproperti yang berisi semua pendengarnya. Dan itu bahkan berfungsi untuk menghilangkan pendengar dengan fungsi anonim.

Gunakan getEventListeners di Google Chrome :

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

(Menulis ulang jawaban dari pertanyaan ini karena relevan di sini.)

Saat debugging, jika Anda hanya ingin melihat acara, saya sarankan ...

1. Peristiwa Visual
2. Bagian Elemen Alat Pengembang Chrome: pilih elemen dan cari "Pendengar Acara" di kanan bawah (serupa di Firefox)

Jika Anda ingin menggunakan acara dalam kode Anda, dan Anda menggunakan jQuery sebelum versi 1.8 , Anda dapat menggunakan:

$(selector).data("events")

untuk mendapatkan acara tersebut. Pada versi 1.8, menggunakan .data ("acara") dihentikan (lihat tiket bug ini ). Kamu bisa menggunakan:

$._data(element, "events")

Contoh lain: Tulis semua acara klik pada tautan tertentu ke konsol:

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

(lihat http://jsfiddle.net/HmsQC/ untuk contoh kerja)

Sayangnya, menggunakan data $ ._ ini tidak disarankan kecuali untuk debugging karena ini adalah struktur jQuery internal, dan dapat berubah dalam rilis mendatang. Sayangnya saya tahu tidak ada cara lain yang mudah untuk mengakses acara.

1: Prototype.observemenggunakan Element.addEventListener (lihat kode sumber )

2: Anda dapat mengganti Element.addEventListeneruntuk mengingat pendengar yang ditambahkan (properti praktis EventListenerListtelah dihapus dari proposal spesifikasi DOM3). Jalankan kode ini sebelum acara apa pun dilampirkan:

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

Baca semua acara dengan:

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

Dan jangan lupa mengganti Element.removeEventListeneruntuk menghapus acara dari kebiasaanElement.eventListenerList .

3: Element.onclickproperti membutuhkan perawatan khusus di sini:

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

4: jangan lupa Element.onclickatribut konten: ini adalah dua hal yang berbeda:

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

Jadi, Anda perlu menanganinya juga:

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

Bookmarklet Peristiwa Visual (disebutkan dalam jawaban paling populer) hanya mencuri cache penangan pustaka kustom:

Ternyata tidak ada metode standar yang disediakan oleh antarmuka DOM yang direkomendasikan W3C untuk mencari tahu acara apa yang dilampirkan pendengar ke elemen tertentu. Meskipun ini mungkin kelihatan sebagai suatu kekeliruan, ada proposal untuk menyertakan properti yang disebut eventListenerList ke spesifikasi DOM level 3, tetapi sayangnya telah dihapus dalam konsep selanjutnya. Karena itu kita dipaksa untuk melihat pustaka Javascript individu, yang biasanya memelihara cache dari peristiwa terlampir (sehingga nanti dapat dihapus dan melakukan abstraksi bermanfaat lainnya).

Dengan demikian, agar Visual Event dapat menampilkan acara, itu harus dapat mengurai informasi acara dari perpustakaan Javascript.

Overriding elemen mungkin dipertanyakan (yaitu karena ada beberapa fitur spesifik DOM seperti koleksi hidup, yang tidak dapat dikodekan dalam JS), tetapi memberikan dukungan eventListenerList secara asli dan berfungsi di Chrome, Firefox, dan Opera (tidak berfungsi di IE7 ).

Anda dapat membungkus metode DOM asli untuk mengelola pendengar acara dengan meletakkan ini di atas Anda <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

Alat pengembang Firefox sekarang melakukan ini. Acara ditampilkan dengan mengklik tombol "ev" di sebelah kanan tampilan setiap elemen, termasuk acara jQuery dan DOM .

Jika Anda memiliki Firebug , Anda dapat menggunakannya console.dir(object or array)untuk mencetak pohon yang bagus di log konsol dari skalar, array, atau objek JavaScript apa pun.

Mencoba:

console.dir(clickEvents);

atau

console.dir(window);

Solusi yang sepenuhnya berfungsi berdasarkan jawaban Jan Turon - berperilaku seperti getEventListeners()dari konsol:

(Ada sedikit bug dengan duplikat. Lagipula tidak banyak yang rusak.)

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

Pemakaian:

someElement.getEventListeners([name]) - Daftar kembali pendengar acara, jika nama diatur array kembali pendengar untuk acara itu

someElement.clearEventListeners([name]) - hapus semua pendengar acara, jika nama disetel hanya hapus pendengar untuk acara itu

Opera 12 (bukan yang berbasis mesin Chrome Webkit terbaru) Dragonfly telah memiliki ini untuk sementara waktu dan jelas ditampilkan dalam struktur DOM. Menurut pendapat saya ini adalah debugger yang unggul dan merupakan satu-satunya alasan yang tersisa mengapa saya masih menggunakan versi berbasis Opera 12 (tidak ada v13, versi v14 dan berbasis Webkit v15 tidak memiliki Dragonfly)

Prototipe 1.7.1 cara

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

Saya baru-baru ini bekerja dengan acara dan ingin melihat / mengontrol semua acara di halaman. Setelah melihat kemungkinan solusi, saya telah memutuskan untuk menempuh jalan saya sendiri dan membuat sistem khusus untuk memantau acara. Jadi, saya melakukan tiga hal.

Pertama, saya membutuhkan wadah untuk semua pendengar acara di halaman: itulah EventListenerstujuannya. Ini memiliki tiga metode yang berguna: add(), remove(), dan get().

Berikutnya, saya membuat sebuah EventListenerobjek untuk memegang informasi yang diperlukan untuk acara tersebut, yaitu: target, type, callback, options, useCapture, wantsUntrusted, dan menambahkan metode remove()untuk menghapus pendengar.

Terakhir, saya memperluas yang asli addEventListener()dan removeEventListener()metode untuk membuatnya bekerja dengan objek yang saya buat ( EventListenerdan EventListeners).

Pemakaian:

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

// bodyClickEvent.remove();

addEventListener()membuat EventListenerobjek, menambahkannya ke EventListenersdan mengembalikan EventListenerobjek, sehingga dapat dihapus nanti.

EventListeners.get()dapat digunakan untuk melihat pendengar di halaman. Ia menerima sebuah EventTargetatau string (tipe acara).

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

Demo

Katakanlah kita ingin mengetahui setiap pendengar acara di halaman ini. Kami dapat melakukannya (dengan asumsi Anda menggunakan ekstensi pengelola skrip, Tampermonkey dalam kasus ini). Script berikut melakukan ini:

// ==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);

Dan ketika kami daftar semua pendengar, dikatakan ada 299 pendengar acara. "Sepertinya" ada beberapa duplikat, tapi saya tidak tahu apakah mereka benar-benar duplikat. Tidak semua jenis acara digandakan, jadi semua "duplikat" itu mungkin adalah pendengar individu.

Kode dapat ditemukan di repositori saya . Saya tidak ingin mempostingnya di sini karena agak panjang.

Pembaruan: Ini sepertinya tidak berfungsi dengan jQuery. Ketika saya memeriksa EventListener, saya melihat bahwa panggilan baliknya

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

Saya percaya ini milik jQuery, dan bukan panggilan balik yang sebenarnya. jQuery menyimpan panggilan balik aktual di properti TargetTarget:

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

Untuk menghapus pendengar acara, panggilan balik yang sebenarnya perlu diteruskan ke removeEventListener()metode. Jadi untuk membuat ini berfungsi dengan jQuery, perlu modifikasi lebih lanjut. Saya mungkin memperbaikinya di masa depan.

Saya mencoba melakukannya di jQuery 2.1, dan dengan metode " $().click() -> $(element).data("events").click;" itu tidak berfungsi.

Saya menyadari bahwa hanya fungsi $ ._ data () yang berfungsi dalam kasus saya:

	$(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>

Ada ekstensi Acara jQuery yang bagus :

( sumber topik )

mengubah fungsi-fungsi ini akan memungkinkan Anda untuk mencatat pendengar yang ditambahkan:

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

baca sisa pendengar dengan

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