Bisakah saya menemukan acara yang terikat pada elemen dengan jQuery?

355

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"?

javascript jquery javascript-events

— Praveen Prasad
sumber

517

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):

Output konsol untuk $ ._

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.

— Sampson
sumber

59

Ini hanya berfungsi untuk elemen-elemen yang terikat melalui pembantu jQuery.

— Alex Ciminian

3

@jammypeach Saya sedang mencoba solusi Anda tetapi masih belum ditentukan kembali untuk pemilih. Saya menggunakan $ ('# elem'). Bind ('click', function () {}); apakah itu akan membuat perbedaan.

— Marcus

6

@marcus ahhh, woops saya melewatkan sesuatu, maaf :)$._data(element[0], ‘events’);

— totallyNotLizards

16

Hari-hari ini orang harus menggunakan: $ ._ data ($ ('# foo') [0]) .events

— Donald Taylor

5

$._data()digunakan oleh JQuery internal. $.data()adalah metode publik untuk pengguna. Dan $.data(element, 'events')berfungsi dengan baik.

— slideshowp2

73

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)

— Vali Shah
sumber

3

Saya setuju ini adalah metode yang disukai dan merupakan solusi universal, dibandingkan mengandalkan jQuery, yang mungkin tersedia atau tidak.

— deadbabykitten

3

@dead umm ... pertanyaan yang secara spesifik merujuk pada jQuery dan menggunakan jQuery pada lampiran contoh - jawabannya hanya valid dalam konteks jQuery (?)

— Code Jockey

3

Sangat membantu untuk memahami jawaban dalam konteks lain juga. Hanya karena seseorang mengajukan pertanyaan tertentu tidak berarti bahwa jawaban terbatas yang akan mereka terima adalah yang terbaik yang tersedia. Apalagi dengan jQuery, orang cenderung mengandalkannya sebagai penopang. Memahami arsitektur yang mendasarinya adalah penting. Jawaban ini menunjukkan bahwa jQuery bahkan tidak diharuskan. Pertanyaan dan contoh terlalu kabur untuk mengetahui penggunaannya dan oleh karena itu, terbuka untuk interpretasi apa yang bisa dianggap sebagai jawaban yang valid.

— deadbabykitten

12

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 ,

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

— kakoma
sumber

1

Ini juga tersedia di alat dev IE.

— devlin carnate

9

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

— ScottyG
sumber

4

Saya pikir itu bukan fungsi asli dan membutuhkan skrip / dependensi berikut: github.com/colxi/getEventListeners Ini harus ditambahkan ke jawabannya, karena itu menyesatkan sebaliknya. Tetapi terima kasih telah membawa saya ke 'plugin' itu; terlihat bagus. :)

— Dennis98

6

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.

— JohnK
sumber

3

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

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

— Chris22
sumber

1

jawaban yang luar biasa, terutama tangkapan layar membuatnya jauh lebih mudah. Terima kasih atas usahanya!

— bizi

2

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.

— Adrian Liew
sumber

2

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

— Pikamander2
sumber

0

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/

— giri-jeedigunta
sumber

3

Alasannya adalah karena Anda mendelegasikan acara tersebut $('#outerWrap'). Peristiwa sebenarnya terikat pada elemen itu daripada jangkar individu.

— Scottux