Làm cách nào để tôi xem các sự kiện được kích hoạt trên một thành phần trong DevTools của Chrome?

Tôi có một yếu tố hình thức tùy biến trên một trang từ thư viện. Tôi muốn xem những sự kiện javascript nào được kích hoạt khi tôi tương tác với nó bởi vì tôi đang cố gắng tìm ra trình xử lý sự kiện nào sẽ sử dụng.

Làm cách nào để sử dụng Chrome Web Developer?

• Nhấn F12để mở Dev Tools
• Nhấp vào tab Nguồn
• Ở phía bên tay phải, cuộn xuống "Điểm dừng của Trình lắng nghe sự kiện" và mở rộng cây
• Bấm vào các sự kiện bạn muốn nghe.
• Tương tác với phần tử đích, nếu chúng bắn bạn sẽ nhận được điểm dừng trong trình gỡ lỗi

Tương tự, bạn có thể nhấp chuột phải vào phần tử đích -> chọn "phần tử kiểm tra" Cuộn xuống phía bên phải của khung dev, ở dưới cùng là 'trình lắng nghe sự kiện'. Mở rộng cây để xem những sự kiện nào được gắn vào phần tử. Không chắc chắn nếu điều này hoạt động cho các sự kiện được xử lý thông qua bong bóng (tôi đoán là không)

Bạn có thể sử dụng chức năng MonitorEvents .

Chỉ cần kiểm tra phần tử của bạn ( right mouse click→ Inspecttrên phần tử hiển thị hoặc chuyển đến Elementstab trong Công cụ dành cho nhà phát triển Chrome và chọn phần tử mong muốn), sau đó chuyển đến Consoletab và viết:

monitorEvents($0)

Bây giờ khi bạn di chuyển chuột qua phần tử này, tập trung hoặc nhấp vào nó, tên của sự kiện được bắn sẽ được hiển thị cùng với dữ liệu của nó.

Để dừng nhận dữ liệu này, chỉ cần viết nó vào bảng điều khiển:

unmonitorEvents($0)

$0chỉ là thành phần DOM cuối cùng được chọn bởi Chrome Developer Tools. Bạn có thể vượt qua bất kỳ đối tượng DOM nào khác ở đó (ví dụ kết quả của getElementByIdhoặc querySelector).

Bạn cũng có thể chỉ định "loại" sự kiện làm tham số thứ hai để thu hẹp các sự kiện được giám sát vào một số bộ được xác định trước. Ví dụ:

monitorEvents(document.body, 'mouse')

Danh sách các loại có sẵn ở đây .

Tôi đã tạo một gif nhỏ minh họa cách tính năng này hoạt động:

Visual Event là một bookmarklet nhỏ mà bạn có thể sử dụng để xem các trình xử lý sự kiện. Trên bản demo trực tuyến có thể được xem tại đây .

Đối với jQuery (ít nhất là phiên bản 1.11.2), quy trình sau đây hoạt động với tôi.

1. Nhấp chuột phải vào yếu tố và mở 'Công cụ dành cho nhà phát triển Chrome'
2. Nhập $._data(($0), 'events');vào 'Bảng điều khiển'
3. Mở rộng các đối tượng đính kèm và nhấp đúp vào handler:giá trị.
4. Điều này cho thấy mã nguồn của chức năng đính kèm, tìm kiếm một phần trong đó bằng cách sử dụng tab 'Tìm kiếm'.

Và đã đến lúc ngừng phát minh lại bánh xe và bắt đầu sử dụng các sự kiện JS vanilla ... :)

Điều này sẽ không hiển thị các sự kiện tùy chỉnh như các tập lệnh của bạn có thể tạo nếu đó là một plugin jquery. ví dụ :

jQuery(function($){
 var ThingName="Something";

 $("body a").live('click', function(Event){
   var $this = $(Event.target);
       $this.trigger(ThingName + ":custom-event-one");
 });

 $.on(ThingName + ":custom-event-one", function(Event){
   console.log(ThingName, "Fired Custom Event: 1", Event);
 })

});

Bảng sự kiện bên dưới Tập lệnh trong các công cụ dành cho nhà phát triển chrome sẽ không hiển thị cho bạn "Something: custom-event-one"