Bagaimana cara mengetahui peristiwa JavaScript mana yang diaktifkan?

122

Saya memiliki daftar pilihan:

<select id="filter">
  <option value="Open" selected="selected">Open</option>
  <option value="Closed">Closed</option>
</select>

Saat saya memilih Closedhalaman dimuat ulang. Dalam hal ini menunjukkan tiket tertutup (bukannya dibuka). Ini berfungsi dengan baik ketika saya melakukannya secara manual.

Masalahnya adalah halaman tidak dimuat ulang saat saya memilih Closeddengan Watir :

browser.select_list(:id => "filter").select "Closed"

Itu biasanya berarti bahwa beberapa peristiwa JavaScript tidak diaktifkan. Saya bisa menyalakan acara dengan Watir:

browser.select_list(:id => "filter").fire_event "onclick"

tapi saya perlu tahu acara mana yang harus diaktifkan.

Apakah ada cara untuk mengetahui kejadian mana yang didefinisikan untuk suatu elemen?

— Željko Filipin
sumber

Pertanyaan ini mencantumkan lebih banyak alat: stackoverflow.com/questions/570960/…

— Željko Filipin

2

Peristiwa Visual, sprymedia.co.uk/article/Visual+Event . Saya yakin itu akan membantu setengah dari orang-orang yang masuk ke halaman stackoverflow ini :)

— Cedric

143

Saya pikir saya akan menambahkan bahwa Anda juga dapat melakukan ini di Chrome:

Ctrl+ Shift+ I(Alat Pengembang)> Sumber> Titik Henti Pemroses Acara (di sebelah kanan).

Anda juga dapat melihat semua peristiwa yang telah dilampirkan cukup dengan mengklik kanan elemen, lalu menjelajahi propertinya (panel di sebelah kanan).

Sebagai contoh:

Klik kanan pada tombol upvote di sebelah kiri

Pilih elemen inspeksi

Ciutkan bagian gaya (bagian paling kanan - chevron ganda)

Perluas opsi pendengar acara

Sekarang Anda dapat melihat acara yang terikat pada upvote

Tidak yakin apakah itu cukup sekuat opsi firebug, tetapi sudah cukup untuk sebagian besar barang saya.

Opsi lain yang sedikit berbeda tetapi sangat mengagumkan adalah Visual Event: http://www.sprymedia.co.uk/article/Visual+Event+2

Ini menyoroti semua elemen pada halaman yang telah terikat dan memiliki popovers yang menunjukkan fungsi yang dipanggil. Cukup bagus untuk bookmark! Ada juga plugin Chrome jika itu yang Anda sukai - tidak yakin tentang browser lain.

AnonymousAndrew juga telah menunjukkannya di sini monitorEvents(window);

— Chris
sumber

2

Saya tidak tahu cara melihat peristiwa mana yang terjadi dengan salah satu cara yang Anda sarankan.

— Željko Filipin

1

Pembaruan: tidak ada Scriptsdi dalam alat Dev (atau inspektur), Anda harus masuk ke Sourcesdan kemudian melihat menu di sebelah kanan.

— aledalgrande

@aledalgrande Terima kasih, telah diperbarui. (Untuk siapa pun yang membaca, ini hanya berlaku untuk solusi pertama, yang kedua masih menggunakan inspektur).

— Chris

1

Apakah ada alasan khusus mengapa Anda memilih tombol suka sebagai contoh untuk ini? : P

— George Dimitriadis

@GeorgeDimitriadis haha bermunculan: P

— Chris

112

Sepertinya Firebug (add-on Firefox) punya jawabannya:

buka Firebug
klik kanan elemen di tab HTML
klik Log Events
aktifkan tab Konsol
klik Tetap di tab Konsol (jika tidak, tab Konsol akan dihapus setelah halaman dimuat ulang)
pilih Closed(secara manual)

akan ada yang seperti ini di tab Console:

...
mousemove clientX=1097, clientY=292
popupshowing
mousedown clientX=1097, clientY=292
focus
mouseup clientX=1097, clientY=292
click clientX=1097, clientY=292
mousemove clientX=1096, clientY=293
...

Sumber: Tip Firebug: Mencatat Kejadian

— Željko Filipin
sumber

4

Terima kasih banyak, saya tidak tahu tentang fitur Firebug itu. Mungkin saya perlu melakukan RTFM beberapa saat.

— Marcel Korpel

Saya tidak mengetahuinya sampai beberapa menit yang lalu. Saya sedang menulis pertanyaan dan menemukan jawabannya di sepanjang jalan. :)

— Željko Filipin

2

Entri blog terbaru dari pengembang Firebug: softwareishard.com/blog/firebug/firebug-tip-log-dom-events

— jakub.g

1

Hai, saya mencoba klik kanan pada firebug tetapi saya tidak dapat menemukan opsi Log Peristiwa, dapatkah Anda membantu saya menemukan yang ini?

— Rajagopalan

2

Hai, plugin Firbug sudah tidak ada lagi. Lalu Bagaimana saya harus mencapai ini? Tolong bantu saya

— HimaaS

71

Terkait Chrome, periksa monitorEvents () melalui API baris perintah.

Buka konsol melalui Menu> Alat> Konsol JavaScript.
Memasukkan monitorEvents(window);

Lihat konsol yang dibanjiri acara

...
mousemove MouseEvent {dataTransfer: ...}
mouseout MouseEvent {dataTransfer: ...}
mouseover MouseEvent {dataTransfer: ...}
change Event {clipboardData: ...}
...

Ada contoh lain di dokumentasi . Saya menduga fitur ini ditambahkan setelah jawaban sebelumnya.

— AnonymousAndrew
sumber

5

Bagus! Sehubungan dengan jQuery:monitorEvents($('#element').get())

— Klaus

1

Untuk menghentikan pemantauan penggunaanunmonitorEvents(window)

— Augustas

0

Anda dapat menggunakan getEventListeners di konsol pengembang Google Chrome Anda .

getEventListeners (object) mengembalikan event listener yang terdaftar pada objek yang ditentukan.

getEventListeners(document.querySelector('option[value=Closed]'));

— JSON C11
sumber