jQuery tìm các trình xử lý sự kiện đã đăng ký với một đối tượng

Tôi cần tìm trình xử lý sự kiện nào được đăng ký trên một đối tượng.

Ví dụ:

$("#el").click(function() {...});
$("#el").mouseover(function() {...});

$("#el")đã nhấp và đăng ký di chuột .

Có một chức năng để tìm ra điều đó, và có thể lặp đi lặp lại qua các trình xử lý sự kiện?

Nếu không thể trên một đối tượng jQuery thông qua các phương thức thích hợp, thì có thể trên một đối tượng DOM đơn giản không?

Kể từ jQuery 1.8, dữ liệu sự kiện không còn có sẵn từ "API công khai" cho dữ liệu. Đọc bài viết trên blog jQuery này . Bây giờ bạn nên sử dụng cái này thay thế:

jQuery._data( elem, "events" );

elem phải là Phần tử HTML, không phải là đối tượng jQuery hoặc bộ chọn.

Xin lưu ý rằng đây là cấu trúc nội bộ, 'riêng tư' và không nên sửa đổi. Chỉ sử dụng cho mục đích gỡ lỗi.

Trong các phiên bản cũ hơn của jQuery, bạn có thể phải sử dụng phương thức cũ đó là:

jQuery( elem ).data( "events" );

Bạn có thể làm điều đó bằng cách thu thập dữ liệu các sự kiện (kể từ jQuery 1.8+), như thế này:

$.each($._data($("#id")[0], "events"), function(i, event) {
  // i is the event type, like "click"
  $.each(event, function(j, h) {
    // h.handler is the function being called
  });
});

Đây là một ví dụ bạn có thể chơi với:

$(function() {
  $("#el").click(function(){ alert("click"); });
  $("#el").mouseover(function(){ alert("mouseover"); });

  $.each($._data($("#el")[0], "events"), function(i, event) {
    output(i);
    $.each(event, function(j, h) {
        output("- " + h.handler);
    });
  });
});

function output(text) {
    $("#output").html(function(i, h) {
        return h + text + "<br />";
    });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="el">Test</div>
<code>
    <span id="output"></span>
</code>

Đối với jQuery 1.8+, điều này sẽ không còn hoạt động vì dữ liệu nội bộ được đặt trong một đối tượng khác.

Cách thức không chính thức mới nhất (nhưng cũng hoạt động trong các phiên bản trước, ít nhất là trong 1.7.2) cách thực hiện bây giờ là - $._data(element, "events")

Dấu gạch dưới ("_") là điều tạo nên sự khác biệt ở đây. Trong nội bộ, nó đang gọi $.data(element, name, null, true), tham số cuối cùng (thứ tư) là một tham số nội bộ ("pvt").

Ổ cắm không biết xấu hổ, nhưng bạn có thể sử dụng findHandlerJS

Để sử dụng nó, bạn chỉ cần bao gồm findHandlersJS (hoặc chỉ sao chép và dán mã javascript thô vào cửa sổ bảng điều khiển của chrome) và chỉ định loại sự kiện và bộ chọn jquery cho các yếu tố bạn quan tâm.

Ví dụ của bạn, bạn có thể nhanh chóng tìm thấy các trình xử lý sự kiện mà bạn đã đề cập bằng cách thực hiện

findEventHandlers("click", "#el")
findEventHandlers("mouseover", "#el")

Đây là những gì được trả lại:

• phần tử
  Phần tử thực tế nơi trình xử lý sự kiện đã được đăng ký
• sự kiện
  Mảng với thông tin về các trình xử lý sự kiện jquery cho loại sự kiện mà chúng ta quan tâm (ví dụ: nhấp, thay đổi, v.v.)
  • handler
    Phương thức xử lý sự kiện thực tế mà bạn có thể thấy bằng cách nhấp chuột phải vào nó và chọn Hiển thị định nghĩa hàm
  • bộ chọn
    Bộ chọn được cung cấp cho các sự kiện được ủy quyền. Nó sẽ trống cho các sự kiện trực tiếp.
  • mục tiêu
    Danh sách với các yếu tố mà trình xử lý sự kiện này nhắm mục tiêu. Ví dụ: đối với một trình xử lý sự kiện được ủy nhiệm được đăng ký trong đối tượng tài liệu và nhắm mục tiêu tất cả các nút trong một trang, thuộc tính này sẽ liệt kê tất cả các nút trong trang. Bạn có thể di chuột và xem chúng được tô sáng bằng chrome.

Bạn có thể thử nó ở đây

Tôi sử dụng plugin eventbird để fireorms cho mục đích này.

Tôi đã kết hợp cả hai giải pháp từ @jps đến một chức năng:

jQuery.fn.getEvents = function() {
    if (typeof(jQuery._data) === 'function') {
        return jQuery._data(this.get(0), 'events') || {};
    }

    // jQuery version < 1.7.?
    if (typeof(this.data) === 'function') {
        return this.data('events') || {};
    }

    return {};
};

Nhưng hãy cẩn thận, hàm này chỉ có thể trả về các sự kiện đã được đặt bằng chính jQuery.

Kể từ 1.9, không có cách nào ghi lại các sự kiện, ngoài việc sử dụng plugin Migrate để khôi phục hành vi cũ. Bạn có thể sử dụng phương thức _.data () như jps đề cập, nhưng đó là một phương thức nội bộ. Vì vậy, chỉ cần làm đúng và sử dụng plugin Di chuyển nếu bạn cần chức năng này.

Từ tài liệu jQuery trên .data("events")

Trước 1.9, .data ("sự kiện") có thể được sử dụng để truy xuất cấu trúc dữ liệu sự kiện nội bộ không có tài liệu của jQuery cho một phần tử nếu không có mã nào khác xác định thành phần dữ liệu có tên "sự kiện". Trường hợp đặc biệt này đã được gỡ bỏ trong 1.9. Không có giao diện chung để truy xuất cấu trúc dữ liệu nội bộ này và nó vẫn không có giấy tờ. Tuy nhiên, plugin jQuery Migrate khôi phục hành vi này cho mã phụ thuộc vào nó.

Để kiểm tra các sự kiện trên một phần tử:

var events = $._data(element, "events")

Lưu ý rằng điều này sẽ chỉ hoạt động với các trình xử lý sự kiện trực tiếp, nếu bạn đang sử dụng $ (document) .on ("tên sự kiện", "jq-selector", function () {// logic}), bạn sẽ muốn xem Hàm getEvents ở cuối câu trả lời này

Ví dụ:

 var events = $._data(document.getElementById("myElemId"), "events")

hoặc là

 var events = $._data($("#myElemId")[0], "events")

Ví dụ đầy đủ:

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
        <script>
            $(function() {
                $("#textDiv").click(function() {
                    //Event Handling
                });
                var events = $._data(document.getElementById('textDiv'), "events");
                var hasEvents = (events != null);
            });
        </script>
    </head>
    <body>
        <div id="textDiv">Text</div>
    </body>
</html>

Một cách đầy đủ hơn để kiểm tra, bao gồm các trình nghe động, được cài đặt với $ (tài liệu) .on

function getEvents(element) {
    var elemEvents = $._data(element, "events");
    var allDocEvnts = $._data(document, "events");
    for(var evntType in allDocEvnts) {
        if(allDocEvnts.hasOwnProperty(evntType)) {
            var evts = allDocEvnts[evntType];
            for(var i = 0; i < evts.length; i++) {
                if($(element).is(evts[i].selector)) {
                    if(elemEvents == null) {
                        elemEvents = {};
                    }
                    if(!elemEvents.hasOwnProperty(evntType)) {
                        elemEvents[evntType] = [];
                    }
                    elemEvents[evntType].push(evts[i]);
                }
            }
        }
    }
    return elemEvents;
}

Ví dụ sử dụng:

getEvents($('#myElemId')[0])

Tôi đã tạo một bộ chọn jQuery tùy chỉnh để kiểm tra cả bộ đệm của bộ xử lý sự kiện được gán cũng như các phần tử sử dụng phương thức gốc để thêm chúng:

(function($){

    $.find.selectors[":"].event = function(el, pos, match) {

        var search = (function(str){
            if (str.substring(0,2) === "on") {str = str.substring(2);}
            return str;
        })(String(match[3]).trim().toLowerCase());

        if (search) {
            var events = $._data(el, "events");
            return ((events && events.hasOwnProperty(search)) || el["on"+search]);
        }

        return false;

    };

})(jQuery);

Thí dụ:

$(":event(click)")

Điều này sẽ trả về các phần tử có trình xử lý nhấp chuột được gắn vào chúng.

Trong trình duyệt hiện đại có ECMAScript 5.1 / Array.prototype.map, bạn cũng có thể sử dụng

jQuery._data(DOCUMENTELEMENT,'events')["EVENT_NAME"].map(function(elem){return elem.handler;});

trong bảng điều khiển trình duyệt của bạn, nơi sẽ in nguồn của trình xử lý, được phân cách bằng dấu phẩy. Hữu ích để liếc nhìn những gì tất cả đang chạy trên một sự kiện cụ thể.

Các sự kiện có thể được lấy ra bằng cách sử dụng:

jQuery(elem).data('events');

hoặc jQuery 1.8+:

jQuery._data(elem, 'events');

Lưu ý:$('selector').live('event', handler) Có thể truy xuất các sự kiện giới hạn bằng cách sử dụng:

jQuery(document).data('events')

Tôi phải nói nhiều câu trả lời rất thú vị, nhưng gần đây tôi có một vấn đề tương tự và giải pháp cực kỳ đơn giản bằng cách đi theo cách của DOM. Nó khác bởi vì bạn không lặp đi lặp lại mà nhắm trực tiếp vào sự kiện bạn cần, nhưng dưới đây tôi sẽ đưa ra câu trả lời chung chung hơn.

Tôi đã có một hình ảnh liên tiếp:

<table>
  <td><tr><img class="folder" /></tr><tr>...</tr></td>
</table>

Và hình ảnh đó có một trình xử lý sự kiện nhấp vào nó:

imageNode.click(function () { ... });

Ý định của tôi là mở rộng khu vực có thể nhấp vào toàn bộ hàng, vì vậy trước tiên tôi có tất cả hình ảnh và hàng tương đối:

tableNode.find("img.folder").each(function () {
  var tr;

  tr = $(this).closest("tr");
  // <-- actual answer
});

Bây giờ trong dòng anwer thực tế tôi vừa làm như sau, đưa ra câu trả lời cho câu hỏi ban đầu:

tr.click(this.onclick);

Vì vậy, tôi đã tìm nạp trình xử lý sự kiện trực tiếp từ phần tử DOM và đưa nó vào trình xử lý sự kiện nhấp chuột jQuery. Hoạt động như một lá bùa.

Bây giờ, đến trường hợp chung. Trong những ngày tiền jQuery cũ, bạn có thể nhận được tất cả các sự kiện gắn liền với một đối tượng với hai hàm đơn giản nhưng mạnh mẽ được tặng cho người phàm của chúng ta bởi Douglas Crockford :

function walkTheDOM(node, func)
{
  func(node);
  node = node.firstChild;
  while (node)
  {
    walkTheDOM(node, func);
    node = node.nextSibling;
  }
}

function purgeEventHandlers(node)
{
  walkTheDOM(node, function (n) {
    var f;

    for (f in n)
    {
      if (typeof n[f] === "function")
      {
        n[f] = null;
      }
    }
  });
}

Hãy dùng thử trình gỡ lỗi jquery nếu bạn đang sử dụng chrome: https://chrome.google.com/webstore/detail/jquery-debugger/dbhhnnnpaeobfddmlalhnehgclcmjimi?hl=vi

Một cách khác để làm điều đó là chỉ cần sử dụng jQuery để lấy phần tử, sau đó đi qua Javascript thực tế để nhận và thiết lập và chơi với các trình xử lý sự kiện. Ví dụ:

var oldEventHandler = $('#element')[0].onclick;
// Remove event handler
$('#element')[0].onclick = null;
// Switch it back
$('#element')[0].onclick = oldEventHandler;

Tôi đã kết hợp một số câu trả lời ở trên và tạo ra kịch bản có vẻ điên rồ nhưng đầy chức năng này liệt kê hy vọng hầu hết những người nghe sự kiện về yếu tố đã cho. Hãy tối ưu hóa nó ở đây.

var element = $("#some-element");

// sample event handlers
element.on("mouseover", function () {
  alert("foo");
});

$(".parent-element").on("mousedown", "span", function () {
  alert("bar");
});

$(document).on("click", "span", function () {
  alert("xyz");
});

var collection = element.parents()
  .add(element)
  .add($(document));
collection.each(function() {
  var currentEl = $(this) ? $(this) : $(document);
  var tagName = $(this)[0].tagName ? $(this)[0].tagName : "DOCUMENT";
  var events = $._data($(this)[0], "events");
  var isItself = $(this)[0] === element[0]
  if (!events) return;
  $.each(events, function(i, event) {
    if (!event) return;
    $.each(event, function(j, h) {
      var found = false;        
      if (h.selector && h.selector.length > 0) {
        currentEl.find(h.selector).each(function () {
          if ($(this)[0] === element[0]) {
            found = true;
          }
        });
      } else if (!h.selector && isItself) {
        found = true;
      }

      if (found) {
        console.log("################ " + tagName);
        console.log("event: " + i);
        console.log("selector: '" + h.selector + "'");
        console.log(h.handler);
      }
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="parent-element">
  <span id="some-element"></span>
</div>

jQuery không cho phép bạn chỉ đơn giản là truy cập các sự kiện cho một phần tử đã cho. Bạn có thể truy cập chúng bằng phương thức nội bộ không có giấy tờ

$._data(element, "events")

Nhưng nó vẫn không cung cấp cho bạn tất cả các sự kiện, chính xác là sẽ không hiển thị cho bạn các sự kiện được chỉ định

$([selector|element]).on()

Những sự kiện này được lưu trữ bên trong tài liệu, vì vậy bạn có thể tìm nạp chúng bằng cách duyệt qua

$._data(document, "events")

nhưng đó là công việc khó khăn, vì có những sự kiện cho toàn bộ trang web.

Tom G ở trên đã tạo chức năng chỉ lọc tài liệu cho các sự kiện của phần tử đã cho và hợp nhất đầu ra của cả hai phương thức, nhưng nó có một lỗ hổng trùng lặp các sự kiện trong đầu ra (và có hiệu quả trong danh sách sự kiện bên trong jQuery của phần tử gây rối với ứng dụng của bạn). Tôi đã sửa lỗi đó và bạn có thể tìm thấy mã bên dưới. Chỉ cần dán nó vào bảng điều khiển dev hoặc vào mã ứng dụng của bạn và thực thi nó khi cần để có danh sách đẹp về tất cả các sự kiện cho phần tử đã cho.

Điều quan trọng cần lưu ý, phần tử thực sự là HTMLE bổ sung, không phải đối tượng jQuery.

function getEvents(element) {
    var elemEvents = $._data(element, "events");
    var allDocEvnts = $._data(document, "events");
    function equalEvents(evt1, evt2)
    {
        return evt1.guid === evt2.guid;
    }

    for(var evntType in allDocEvnts) {
        if(allDocEvnts.hasOwnProperty(evntType)) {
            var evts = allDocEvnts[evntType];
            for(var i = 0; i < evts.length; i++) {
                if($(element).is(evts[i].selector)) {
                    if(elemEvents == null) {
                        elemEvents = {};
                    }
                    if(!elemEvents.hasOwnProperty(evntType)) {
                        elemEvents[evntType] = [];
                    }
                    if(!elemEvents[evntType].some(function(evt) { return equalEvents(evt, evts[i]); })) {
                        elemEvents[evntType].push(evts[i]);
                    }
                }
            }
        }
    }
    return elemEvents;
}