Hangi JavaScript olaylarının tetiklendiğini nasıl öğrenebilirim?

Bir seçim listem var:

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

ClosedSayfanın yeniden yüklenmesini seçtiğimde . Bu durumda kapalı biletleri gösterir (açılmak yerine). El ile yaptığımda iyi çalışıyor.

Sorun şu ki, WatirClosed ile seçim yaptığımda sayfa yeniden yüklenmiyor :

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

Bu genellikle bazı JavaScript olaylarının tetiklenmediği anlamına gelir. Watir ile olayları tetikleyebilirim:

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

ama hangi olayın ateşleneceğini bilmem gerekiyor.

Bir öğe için hangi olayların tanımlandığını bulmanın bir yolu var mı?

Bunu Chrome'da da yapabileceğinizi eklemeyi düşündüm:

Ctrl+ Shift+ I(Geliştirici Araçları)> Kaynaklar> Etkinlik Dinleyici Kesme Noktaları (sağda).

Ayrıca, öğeye sağ tıklayarak ve ardından özelliklerine göz atarak (sağdaki panel) zaten eklenmiş olan tüm olayları görüntüleyebilirsiniz.

Örneğin:

Kundakçı seçeneği kadar güçlü olup olmadığından emin değilim, ama çoğu şey için yeterliydi.

Biraz farklı ama şaşırtıcı derecede harika olan başka bir seçenek de Görsel Etkinlik: http://www.sprymedia.co.uk/article/Visual+Event+2

Bir sayfadaki ciltlenmiş tüm öğeleri vurgular ve çağrılan işlevleri gösteren açılır pencerelere sahiptir. Bir yer imi için oldukça şık! Bir Chrome eklentisi de var, eğer bu senin işin daha fazlasıysa - diğer tarayıcılardan emin değil.

AnonymousAndrew ayrıca buradamonitorEvents(window);

Görünüşe göre Firebug (Firefox eklentisi) cevabı veriyor:

• Firebug'ı aç
• HTML sekmesindeki öğeye sağ tıklayın
• Tıklayın Log Events
• Konsol sekmesini etkinleştir
• Konsol sekmesinde Kal'ı tıklayın (aksi takdirde Konsol sekmesi sayfa yeniden yüklendikten sonra temizlenir)
• seç Closed(elle)

• Konsol sekmesinde şuna benzer bir şey olacak:

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

Kaynak: Firebug İpucu: Olayları Günlüğe Kaydet

Chrome ile ilgili olarak, monitorEvents () 'i komut satırı API'sı aracılığıyla kontrol edin.

• Konsolu Menü> Araçlar> JavaScript Konsolu aracılığıyla açın.
• Giriş monitorEvents(window);

• Olaylarla dolu konsolu görüntüleyin

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

Belgelerde başka örnekler de var . Sanırım bu özellik önceki cevaptan sonra eklendi.

Sen kullanabilirsiniz getEventListeners sizin de Google Chrome geliştirici konsoluna .

getEventListeners (object), belirtilen nesneye kayıtlı olay dinleyicilerini döndürür.

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