Kiểm tra trình xử lý sự kiện đính kèm để tìm bất kỳ phần tử DOM nào

Có cách nào để xem những hàm / mã nào được đính kèm với bất kỳ sự kiện nào cho phần tử DOM không? Sử dụng Firebug hoặc bất kỳ công cụ nào khác.

Các trình xử lý sự kiện được đính kèm bằng cách sử dụng element.onclick= handlerHTML hoặc truyền thống <element onclick="handler">có thể được truy xuất một cách ít ỏi từelement.onclick tính từ tập lệnh hoặc trình gỡ lỗi trong.

Các trình xử lý sự kiện được đính kèm bằng cách sử dụng addEventListenercác phương thức Sự kiện DOM Mức 2 và IE attachEventhiện không thể truy xuất được từ tập lệnh. DOM Level 3 đã từng được đề xuất element.eventListenerListđể có được tất cả người nghe, nhưng không rõ liệu điều này có đưa nó đến thông số kỹ thuật cuối cùng hay không. Không có triển khai trong bất kỳ trình duyệt nào hiện nay.

Một công cụ gỡ lỗi dưới dạng tiện ích mở rộng trình duyệt có thể truy cập vào những loại trình nghe này, nhưng tôi không biết bất kỳ công cụ nào thực sự làm được điều đó.

Một số khuôn khổ JS để lại đủ hồ sơ về ràng buộc sự kiện để tìm ra những gì chúng đã làm. Visual Event sử dụng cách tiếp cận này để khám phá những người nghe đã đăng ký thông qua một số khuôn khổ phổ biến.

Các yếu tố Bảng điều chỉnh trong các công cụ phát triển trên Google Chrome đã có này kể từ khi phát hành Chrome vào giữa năm 2011 và phát hành kênh nhà phát triển Chrome từ năm 2010.

Ngoài ra, các trình lắng nghe sự kiện được hiển thị cho nút đã chọn theo thứ tự mà chúng được kích hoạt qua các giai đoạn bắt giữ và tạo bọt.

Nhấn command+ option+ itrên Mac OSX và Ctrl+ Shift+ itrên Windows để kích hoạt tính năng này trong Chrome

Chrome Dev Tools gần đây đã công bố một số công cụ mới để theo dõi các sự kiện JavaScript .

TL; DR

Nghe các sự kiện của một loại nhất định bằng cách sử dụng monitorEvents().

Sử dụng unmonitorEvents()để ngừng nghe.

Thu hút người nghe của phần tử DOM bằng cách sử dụng getEventListeners().

Sử dụng bảng Kiểm tra người nghe sự kiện để nhận thông tin về người nghe sự kiện.

Tìm sự kiện tùy chỉnh

Đối với nhu cầu của tôi, khám phá các sự kiện JS tùy chỉnh trong mã của bên thứ ba, hai phiên bản sau của getEventListeners()chúng hữu ích một cách đáng kinh ngạc;

• getEventListeners(window)
• getEventListeners(document)

Nếu bạn biết DOM Node mà trình xử lý sự kiện được gắn vào, bạn sẽ chuyển nó thay vì windowhoặc document.

Sự kiện đã biết

Nếu bạn biết sự kiện gì bạn muốn theo dõi ví dụ clicktrên cơ thể tài liệu mà bạn có thể sử dụng những điều sau đây: monitorEvents(document.body, 'click');.

Bây giờ bạn sẽ bắt đầu thấy tất cả các sự kiện nhấp chuột trên document.bodyđang được đăng nhập trong bảng điều khiển.

Bạn có thể xem các sự kiện được đính kèm trực tiếp (element.onclick = handler) bằng cách xem DOM. Bạn có thể xem các sự kiện được đính kèm jQuery trong Firefox bằng FireBug với FireQuery. Dường như không có bất kỳ cách nào để xem các sự kiện do addEventListener thêm bằng FireBug. Tuy nhiên, bạn có thể thấy chúng trong Chrome bằng trình gỡ lỗi Chrome.

Bạn có thể sử dụng Visual Event của Allan Jardine để kiểm tra tất cả các trình xử lý sự kiện được đính kèm hiện tại từ một số thư viện JavaScript chính trên trang của bạn. Nó hoạt động với jQuery, YUI và một số khác.

Visual Event là một bookmarklet JavaScript nên tương thích với tất cả các trình duyệt chính.

Bạn có thể mở rộng môi trường javascript của mình để theo dõi những người nghe sự kiện. Bao bọc (hoặc 'quá tải') phương thức addEventListener () gốc bằng một số mã có thể giữ bản ghi của bất kỳ trình nghe sự kiện nào được thêm vào từ đó trở đi . Bạn cũng sẽ phải mở rộng HTMLElement.prototype.removeEventListener để giữ các bản ghi phản ánh chính xác những gì đang xảy ra trong DOM.

Chỉ nhằm mục đích minh họa (mã chưa được kiểm tra) - đây là ví dụ về cách bạn sẽ 'bọc' addEventListener để có các bản ghi của trình nghe sự kiện đã đăng ký trên chính đối tượng:

var nativeMethod = HTMLElement.prototype.addEventListener;
HTMLElement.prototype.addEventListener = function (type, listener) {
   var el = e.currentTarget;
   if(!(el.eventListeners instanceof Array)) { el.eventListeners = []}
   el.eventListeners.push({'type':type, 'listener':listener});
   nativeMethod.call(el, type, listener);
}