Cách tìm hiểu sự kiện JavaScript nào được kích hoạt?

Question

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

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

Khi tôi chọn Closed trang web load lại. 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 điều đó bằng tay.

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

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

Đó thường có nghĩa là một số sự kiện JavaScript không được sa thải. Tôi có thể kích hoạt 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 cần kích hoạt.

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?

Answer 1

Hình như Firebug (add-on Firefox) có câu trả lời:

• mở Firebug
• kích chuột phải vào phần tử trong tab HTML
• nhấp chuột Log Events
• cho phép điều khiển tab
• nhấp chuột Duy 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 (bằng tay)

• 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: Firebug Tip: Log Events

Answer 2

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

Ctrl + Shift + I (Công cụ dành cho nhà phát triển)> Nguồn> Điểm ngắt danh sách 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 các thuộc tính của nó (bảng bên phải).

Ví dụ:

Nhấp chuột phải vào nút upvote sang trái

Chọn kiểm tra nguyên tố

Thu gọn phần phong cách (phần trên bên phải - đôi chevron)

Mở rộng các tùy chọn nghe sự kiện

Giờ đây, bạn có thể thấy các sự kiện được gắn với phần giới thiệu

Không chắc chắn sự kiện đó có mạnh mẽ như tùy chọn firebug hay không, nhưng đã đủ cho hầu hết nội dung của tôi.

Một tùy chọn khác là một chút khác nhau nhưng đáng ngạc nhiên tuyệt vời là Visual tổ chức sự kiện: 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 đã được ràng buộc và có popovers thể hiện các chức năng mà được gọi là. Khá tiện lợi cho một dấu trang! Cũng có một plugin Chrome nếu đó là điều của bạn - không chắc chắn về các trình duyệt khác.

AnonymousAndrew cũng đã chỉ ra monitorEvents(window);here

Answer 3

Về Chrome, kiểm tra các monitorEvents() thông qua dòng lệnh API.

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

• Xem giao diện điều khiển tràn ngập sự kiện

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

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