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?

javascript events watir dom-events browser-automation Ž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

Jawaban:

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