Tôi có thể tìm các sự kiện bị ràng buộc trên một phần tử với jQuery không?

Tôi liên kết hai trình xử lý sự kiện trên liên kết này:

<a href='#' id='elm'>Show Alert</a>

JavaScript:

$(function()
{
  $('#elm').click(_f);
  $('#elm').mouseover(_m);
});

function _f(){alert('clicked');}
function _m(){alert('mouse over');}

Có cách nào để có được danh sách tất cả các sự kiện bị ràng buộc trên một phần tử, trong trường hợp này là phần tử với id="elm"?

Trong các phiên bản hiện đại của jQuery, bạn sẽ sử dụng $._dataphương thức để tìm bất kỳ sự kiện nào được jQuery đính kèm với phần tử được đề cập. Lưu ý , đây là phương pháp chỉ sử dụng nội bộ:

// Bind up a couple of event handlers
$("#foo").on({
    click: function(){ alert("Hello") },
    mouseout: function(){ alert("World") }
});

// Lookup events for this particular Element
$._data( $("#foo")[0], "events" );

Kết quả từ $._datasẽ là một đối tượng chứa cả hai sự kiện chúng ta đặt (hình dưới đây với thuộc mouseouttính được mở rộng):

Sau đó, trong Chrome, bạn có thể nhấp chuột phải vào chức năng xử lý và nhấp vào "xem định nghĩa chức năng" để hiển thị cho bạn vị trí chính xác nơi nó được xác định trong mã của bạn.

Trường hợp chung:

• Nhấn F12để mở Dev Tools
• Nhấp vào Sourcestab
• Ở phía bên tay phải, cuộn xuống Event Listener Breakpointsvà 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 " Inspect element"
• Cuộn xuống phía bên phải của khung dev, ở dưới cùng là ' event listeners'.
• 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)

Tôi đang thêm điều này cho hậu thế; Có một cách dễ dàng hơn mà không liên quan đến việc viết thêm JS. Sử dụng addon firebird tuyệt vời cho firefox ,

1. Nhấp chuột phải vào phần tử và chọn 'Kiểm tra phần tử bằng Fireorms'
2. Trong bảng điều khiển bên (hiển thị trong ảnh chụp màn hình), điều hướng đến tab sự kiện bằng cách sử dụng mũi tên> nhỏ
3. Tab sự kiện hiển thị các sự kiện và chức năng tương ứng cho từng sự kiện
4. Văn bản bên cạnh nó hiển thị vị trí chức năng

Bây giờ bạn có thể chỉ cần lấy một danh sách các trình lắng nghe sự kiện được liên kết với một đối tượng bằng cách sử dụng hàm javascript getEventListener ().

Ví dụ: nhập nội dung sau trong bảng điều khiển công cụ dev:

// Get all event listners bound to the document object
getEventListeners(document);

Các jQuery Audit Plugin Plugin sẽ cho phép bạn thực hiện điều này thông qua Chrome Dev cụ bình thường. Nó không hoàn hảo, nhưng nó sẽ cho phép bạn thấy trình xử lý thực tế bị ràng buộc với phần tử / sự kiện chứ không chỉ là trình xử lý jQuery chung.

Mặc dù điều này không chính xác cụ thể đối với các bộ chọn / đối tượng jQuery, nhưng trong FireFox Quantum 58.x, bạn có thể tìm thấy các trình xử lý sự kiện trên một phần tử bằng các công cụ Dev:

1. Nhấp chuột phải vào phần tử
2. Trong menu ngữ cảnh, nhấp vào 'Kiểm tra phần tử'
3. Nếu có biểu tượng 'ev' bên cạnh phần tử (hộp màu vàng), hãy nhấp vào biểu tượng 'ev'
4. Hiển thị tất cả các sự kiện cho phần tử đó và xử lý sự kiện

Tôi đã sử dụng một cái gì đó như thế này nếu ($ ._ data ($ ("a.wine-item-link") [0]). Events == null) {... làm một cái gì đó, khá nhiều ràng buộc trình xử lý sự kiện của họ một lần nữa} để kiểm tra nếu yếu tố của tôi bị ràng buộc với bất kỳ sự kiện. Nó vẫn sẽ nói không xác định (null) nếu bạn đã hủy liên kết tất cả các trình xử lý sự kiện của bạn từ phần tử đó. Đó là lý do tại sao tôi đánh giá điều này trong một biểu thức if.

Lưu ý rằng các sự kiện có thể được đính kèm vào chính tài liệu chứ không phải là yếu tố được đề cập. Trong trường hợp đó, bạn sẽ muốn sử dụng:

$._data( $(document)[0], "events" );

Và tìm sự kiện với bộ chọn chính xác :

Và sau đó nhìn vào trình xử lý > [[FunctionLocation]]

Khi tôi chuyển một truy vấn DOM phức tạp nhỏ đến dữ liệu $ ._ như thế này: $._data($('#outerWrap .innerWrap ul li:last a'), 'events')nó sẽ ném không xác định trong bảng điều khiển trình duyệt.

Vì vậy, tôi đã phải sử dụng dữ liệu $ ._ trên div cha: $._data($('#outerWrap')[0], 'events')để xem các sự kiện cho các thẻ. Đây là một JSFiddle cho cùng: http://jsfiddle.net/giri_jeedigunta/MLcpT/4/