Làm thế nào để tìm ra những sự kiện JavaScript bị sa thải?

Tôi có một danh sách chọn:

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

Khi tôi chọn Closedtải lại trang. Trong trường hợp này, nó hiển thị vé đã đóng (thay vì mở). Nó hoạt động tốt khi tôi làm bằng tay.

Vấn đề là trang không tải lại khi tôi chọn Closedvới Watir :

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

Điều đó thường có nghĩa là một số sự kiện JavaScript không được kích hoạt. Tôi có thể bắn các sự kiện với Watir:

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

nhưng tôi cần biết sự kiện nào để bắn.

Có cách nào để tìm ra sự kiện nào được xác định cho một phần tử không?

Chỉ cần nghĩ rằng tôi thêm rằng bạn cũng có thể làm điều này trong Chrome:

Ctrl+ Shift+ I(Công cụ dành cho nhà phát triển)> Nguồn> Điểm dừng của Trình lắng nghe sự kiện (ở bên phải).

Bạn cũng có thể xem tất cả các sự kiện đã được đính kèm bằng cách nhấp chuột phải vào phần tử và sau đó duyệt thuộc tính của nó (bảng bên phải).

Ví dụ:

Không chắc nó có mạnh mẽ như tùy chọn con bọ lửa không, nhưng đã đủ cho hầu hết những thứ của tôi.

Một tùy chọn khác có một chút khác biệt nhưng đáng kinh ngạc là Sự kiện Trực quan: http://www.sprymedia.co.uk/article/Visual+Event+2

Nó làm nổi bật tất cả các yếu tố trên một trang đã bị ràng buộc và có cửa sổ bật lên hiển thị các chức năng được gọi. Khá tiện lợi cho một dấu trang! Cũng có một plugin Chrome nếu đó là điều bạn thích hơn - không chắc chắn về các trình duyệt khác.

AnonymousAndrew cũng đã chỉ ra ở đâymonitorEvents(window);

Có vẻ như Fireorms (add-on Firefox) có câu trả lời:

• mở Firebird
• nhấp chuột phải vào phần tử trong tab HTML
• nhấp chuột Log Events
• bật tab Bảng điều khiển
• nhấp vào Kiên trì trong tab Bảng điều khiển (nếu không, tab Bảng điều khiển sẽ xóa sau khi trang được tải lại)
• chọn Closed(thủ công)

• sẽ có một cái gì đó như thế này trong 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
  ...

Nguồn: Firebird Tip: Đăng nhập Sự kiện

Về Chrome, hãy kiểm tra MonitorEvents () thông qua API dòng lệnh.

• Mở bảng điều khiển qua Menu> Công cụ> Bảng điều khiển JavaScript.
• Đi vào monitorEvents(window);

• Xem bảng điều khiển tràn ngập các sự kiện

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

Có những ví dụ khác trong tài liệu . Tôi đoán tính năng này đã được thêm vào sau câu trả lời trước.

Bạn có thể sử dụng getEventListener trong bảng điều khiển dành cho nhà phát triển Google Chrome của mình .

getEventListener (object) trả về các trình lắng nghe sự kiện đã đăng ký trên đối tượng đã chỉ định.

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