Bisakah saya menemukan acara yang terikat pada elemen dengan jQuery?

Saya mengikat dua penangan acara di tautan ini:

<a href='#' id='elm'>Show Alert</a>

JavaScript:

$(function()
{
  $('#elm').click(_f);
  $('#elm').mouseover(_m);
});

function _f(){alert('clicked');}
function _m(){alert('mouse over');}

Apakah ada cara untuk mendapatkan daftar semua peristiwa yang terikat pada elemen, dalam hal ini elemen id="elm"?

Dalam versi modern jQuery, Anda akan menggunakan $._datametode ini untuk menemukan acara yang dilampirkan oleh jQuery ke elemen yang dimaksud. Catatan , ini hanya metode penggunaan internal:

// Bind up a couple of event handlers
$("#foo").on({
    click: function(){ alert("Hello") },
    mouseout: function(){ alert("World") }
});

// Lookup events for this particular Element
$._data( $("#foo")[0], "events" );

Hasil dari $._dataakan menjadi objek yang berisi kedua peristiwa yang kami atur (digambarkan di bawah dengan mouseoutproperti diperluas):

Kemudian di Chrome, Anda dapat mengklik kanan fungsi handler dan mengklik "view definition function" untuk menunjukkan tempat yang tepat di mana ia didefinisikan dalam kode Anda.

Kasus umum:

• Tekan F12untuk membuka Dev Tools
• Klik Sourcestab
• Di sisi kanan, gulir ke bawah Event Listener Breakpoints, dan rentangkan pohon
• Klik pada acara yang ingin Anda dengarkan.
• Berinteraksi dengan elemen target, jika mereka menembak Anda akan mendapatkan break point di debugger

Demikian pula, Anda dapat:

• klik kanan pada elemen target -> pilih " Inspect element"
• Gulir ke bawah di sisi kanan bingkai dev, di bagian bawah adalah ' event listeners'.
• Rentangkan pohon untuk melihat acara apa yang dilampirkan ke elemen. Tidak yakin apakah ini berfungsi untuk acara yang ditangani melalui gelembung (saya kira tidak)

Saya menambahkan ini untuk anak cucu; Ada cara yang lebih mudah yang tidak melibatkan menulis lebih banyak JS. Menggunakan addon pembakar yang luar biasa untuk firefox ,

1. Klik kanan pada elemen dan pilih 'Periksa elemen dengan Firebug'
2. Di panel bilah sisi (diperlihatkan dalam tangkapan layar), navigasikan ke tab acara menggunakan panah> kecil
3. Tab acara menunjukkan acara dan fungsi yang sesuai untuk setiap acara
4. Teks di sebelahnya menunjukkan lokasi fungsi

Anda sekarang dapat dengan mudah mendapatkan daftar pendengar acara yang terikat pada suatu objek dengan menggunakan fungsi javascript getEventListeners ().

Misalnya ketikkan yang berikut ini di konsol alat dev:

// Get all event listners bound to the document object
getEventListeners(document);

The jQuery Audit Plugin Plugin harus membiarkan Anda melakukan hal ini melalui normal Chrome Dev Tools. Ini tidak sempurna, tetapi harus membiarkan Anda melihat handler sebenarnya terikat pada elemen / acara dan bukan hanya penangan jQuery generik.

Meskipun ini tidak spesifik untuk penyeleksi / objek jQuery, di FireFox Quantum 58.x, Anda bisa menemukan event handler pada elemen menggunakan alat Dev:

1. Klik kanan elemen tersebut
2. Di menu konteks, Klik 'Periksa Elemen'
3. Jika ada ikon 'ev' di sebelah elemen (kotak kuning), klik ikon 'ev'
4. Menampilkan semua acara untuk elemen dan pengendali acara tersebut

Saya menggunakan sesuatu seperti ini jika ($ ._ data ($ ("a.wine-item-link") [0]). Events == null) {... melakukan sesuatu, cukup banyak mengikat pengendali acara mereka lagi} untuk memeriksa jika elemen saya terikat pada acara apa pun. Itu akan tetap mengatakan tidak terdefinisi (nol) jika Anda telah melepaskan semua penangan acara dari elemen itu. Itulah alasan mengapa saya mengevaluasi ini dalam ekspresi if.

Perhatikan bahwa acara dapat dilampirkan pada dokumen itu sendiri daripada elemen yang dimaksud. Dalam hal ini, Anda ingin menggunakan:

$._data( $(document)[0], "events" );

Dan temukan acara dengan pemilih yang benar :

Dan kemudian lihat pawang > [[FunctionLocation]]

Ketika saya mengirimkan sedikit permintaan DOM yang rumit ke data $ ._ seperti ini: $._data($('#outerWrap .innerWrap ul li:last a'), 'events')itu melempar tidak terdefinisi di konsol browser.

Jadi saya harus menggunakan data $ ._ pada div induk: $._data($('#outerWrap')[0], 'events')untuk melihat acara untuk tag a. Berikut ini adalah JSFiddle untuk hal yang sama: http://jsfiddle.net/giri_jeedigunta/MLcpT/4/