จะทราบได้อย่างไรว่าเหตุการณ์ใดที่ JavaScript เริ่มทำงาน

ฉันมีรายการที่เลือก:

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

เมื่อฉันเลือกรีClosedโหลดเพจ ในกรณีนี้จะแสดงตั๋วปิด (แทนที่จะเปิด) ทำงานได้ดีเมื่อฉันทำด้วยตนเอง

ปัญหาคือหน้าไม่โหลดซ้ำเมื่อฉันเลือกClosedด้วยWatir :

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

ซึ่งโดยปกติหมายความว่าเหตุการณ์ JavaScript บางอย่างไม่ได้เริ่มทำงาน ฉันสามารถจุดไฟด้วย Watir:

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

แต่ฉันต้องรู้ว่าเหตุการณ์ไหนจะเกิดขึ้น

มีวิธีค้นหาว่าเหตุการณ์ใดถูกกำหนดสำหรับองค์ประกอบหรือไม่?

แค่คิดว่าฉันจะเพิ่มว่าคุณสามารถทำได้ใน Chrome เช่นกัน:

Ctrl+ Shift+ I(เครื่องมือสำหรับนักพัฒนา)> แหล่งที่มา> เบรกพอยต์ของผู้ฟังเหตุการณ์ (ทางด้านขวา)

คุณยังสามารถดูเหตุการณ์ทั้งหมดที่แนบไปแล้วได้โดยเพียงแค่คลิกขวาที่องค์ประกอบจากนั้นเรียกดูคุณสมบัติ (แผงทางด้านขวา)

ตัวอย่างเช่น:

ไม่แน่ใจว่ามันทรงพลังพอ ๆ กับตัวเลือก firebug หรือเปล่า แต่ก็เพียงพอแล้วสำหรับสิ่งต่างๆของฉัน

อีกทางเลือกหนึ่งที่แตกต่างกันเล็กน้อย แต่น่าประหลาดใจคือ Visual Event: http://www.sprymedia.co.uk/article/Visual+Event+2

ไฮไลต์องค์ประกอบทั้งหมดในหน้าที่ถูกผูกไว้และมีป๊อปโอเวอร์แสดงฟังก์ชันที่เรียกใช้ สวยดีสำหรับบุ๊คมาร์ค! มีปลั๊กอิน Chrome เช่นกันหากเป็นสิ่งที่คุณต้องการมากกว่านี้ - ไม่แน่ใจเกี่ยวกับเบราว์เซอร์อื่น ๆ

AnonymousAndrewได้ชี้ให้เห็นที่นี่ด้วยmonitorEvents(window);

ดูเหมือนว่าFirebug (ส่วนเสริมของ Firefox) มีคำตอบ:

• เปิด Firebug
• คลิกขวาที่องค์ประกอบในแท็บ HTML
• คลิก Log Events
• เปิดใช้งานแท็บคอนโซล
• คลิกแท็บคงอยู่ในคอนโซล (มิฉะนั้นแท็บคอนโซลจะล้างหลังจากโหลดหน้าใหม่)
• เลือกClosed(ด้วยตนเอง)

• จะมีสิ่งนี้ในแท็บคอนโซล:

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

ที่มา: Firebug เคล็ดลับ: บันทึกเหตุการณ์

เกี่ยวกับ Chrome ให้ชำระเงิน monitorEvents () ผ่านทางบรรทัดคำสั่ง API

• เปิดคอนโซลผ่านเมนู> เครื่องมือ> คอนโซล JavaScript
• เข้าสู่ monitorEvents(window);

• ดูคอนโซลที่เต็มไปด้วยเหตุการณ์

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

มีตัวอย่างอื่น ๆ ที่มีเอกสาร ฉันเดาว่ามีการเพิ่มคุณสมบัตินี้หลังจากคำตอบก่อนหน้านี้

คุณสามารถใช้getEventListenersของคุณในคอนโซลนักพัฒนาซอฟต์แวร์ของ Google Chrome

getEventListeners (object) ส่งกลับตัวฟังเหตุการณ์ที่ลงทะเบียนบนอ็อบเจ็กต์ที่ระบุ

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