jQuery menemukan penangan acara yang terdaftar pada suatu objek

Saya perlu menemukan penangan acara mana yang terdaftar atas suatu objek.

Sebagai contoh:

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

$("#el")telah klik dan mouseover terdaftar.

Apakah ada fungsi untuk mengetahuinya, dan mungkin mengulangi event handler?

Jika tidak mungkin pada objek jQuery melalui metode yang tepat, apakah mungkin pada objek DOM biasa?

Pada jQuery 1.8, data acara tidak lagi tersedia dari "API publik" untuk data. Baca posting blog jQuery ini . Anda sekarang harus menggunakan ini sebagai gantinya:

jQuery._data( elem, "events" );

elem harus berupa Elemen HTML, bukan objek jQuery, atau pemilih.

Harap dicatat, bahwa ini adalah struktur internal, 'pribadi', dan tidak boleh dimodifikasi. Gunakan ini hanya untuk keperluan debugging.

Di versi jQuery yang lebih lama, Anda mungkin harus menggunakan metode lama yaitu:

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

Anda dapat melakukannya dengan merangkak acara (per jQuery 1.8+), seperti ini:

$.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
  });
});

Inilah contoh yang bisa Anda mainkan:

$(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>

Untuk jQuery 1.8+, ini tidak akan berfungsi lagi karena data internal ditempatkan di objek yang berbeda.

Cara tidak resmi terbaru (tetapi berfungsi di versi sebelumnya juga, setidaknya dalam 1.7.2) untuk melakukannya sekarang adalah - $._data(element, "events")

Garis bawah ("_") adalah yang membuat perbedaan di sini. Secara internal, ia memanggil $.data(element, name, null, true), parameter (keempat) terakhir adalah internal ("pvt").

Steker yang tidak tahu malu, tetapi Anda dapat menggunakan findHandlerJS

Untuk menggunakannya Anda hanya perlu memasukkan findHandlersJS (atau cukup salin & tempel kode javascript mentah ke jendela konsol chrome) dan tentukan jenis acara dan pemilih jquery untuk elemen yang Anda minati.

Sebagai contoh Anda, Anda dapat dengan cepat menemukan penangan acara yang Anda sebutkan dengan melakukan

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

Inilah yang dikembalikan:

• element Elemen
  aktual tempat pengendali event terdaftar
• events
  Array dengan informasi tentang penangan acara jquery untuk jenis acara yang menarik bagi kami (mis. klik, ubah, dll.)
  • handler
    Metode event handler aktual yang dapat Anda lihat dengan mengklik kanan dan memilih Tampilkan definisi fungsi
  • selector
    Selector yang disediakan untuk acara yang didelegasikan. Itu akan kosong untuk acara langsung.
  • target
    Daftar dengan elemen-elemen yang ditargetkan oleh event handler ini. Misalnya, untuk pengendali acara yang didelegasikan yang terdaftar di objek dokumen dan menargetkan semua tombol di halaman, properti ini akan mencantumkan semua tombol di halaman. Anda dapat mengarahkannya dan melihatnya disorot dalam chrome.

Anda bisa mencobanya di sini

Saya menggunakan plugin EventBug untuk Firebug untuk tujuan ini.

Saya telah menggabungkan kedua solusi dari @jps ke satu fungsi:

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 {};
};

Namun waspadalah, fungsi ini hanya dapat mengembalikan acara yang diatur menggunakan jQuery itu sendiri.

Pada 1.9, tidak ada cara yang terdokumentasi untuk mengambil kembali acara, selain menggunakan plugin Migrate untuk memulihkan perilaku lama. Anda bisa menggunakan metode _.data () sebagai jps menyebutkan, tetapi itu adalah metode internal. Jadi lakukan saja hal yang benar dan gunakan plugin Migrasi jika Anda memerlukan fungsi ini.

Dari dokumentasi jQuery pada .data("events")

Sebelum 1.9, .data ("events") dapat digunakan untuk mengambil struktur data acara internal jQuery yang tidak didokumentasikan untuk suatu elemen jika tidak ada kode lain yang mendefinisikan elemen data dengan nama "events". Kasing khusus ini telah dihapus pada 1.9. Tidak ada antarmuka publik untuk mengambil struktur data internal ini, dan itu tetap tidak berdokumen. Namun, plugin jQuery Migrate mengembalikan perilaku ini untuk kode yang bergantung padanya.

Untuk memeriksa acara pada suatu elemen:

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

Perhatikan bahwa ini hanya akan bekerja dengan penangan kejadian langsung, jika Anda menggunakan $ (dokumen) .on ("nama-acara", "pemilih-jq", fungsi () {// logika}), Anda akan ingin melihat fungsi getEvents di bagian bawah jawaban ini

Sebagai contoh:

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

atau

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

Contoh Lengkap:

<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>

Cara yang lebih lengkap untuk memeriksa, termasuk pendengar dinamis, diinstal dengan $ (dokumen) .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;
}

Contoh penggunaan:

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

Saya membuat pemilih jQuery khusus yang memeriksa cache kedua penangan kejadian yang ditugaskan jQuery serta elemen yang menggunakan metode asli untuk menambahkannya:

(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);

Contoh:

$(":event(click)")

Ini akan mengembalikan elemen yang memiliki penangan klik terpasang padanya.

Di browser modern dengan ECMAScript 5.1 / Array.prototype.map, Anda juga dapat menggunakan

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

di konsol browser Anda, yang akan mencetak sumber dari penangan, dibatasi koma. Berguna untuk melirik apa yang sedang berjalan pada acara tertentu.

Acara dapat diambil menggunakan:

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

atau jQuery 1.8+:

jQuery._data(elem, 'events');

Catatan: Acara yang dibatasi menggunakan $('selector').live('event', handler) dapat diambil menggunakan:

jQuery(document).data('events')

Saya harus mengatakan banyak jawaban yang menarik, tetapi baru-baru ini saya memiliki masalah yang sama dan solusinya sangat sederhana dengan menggunakan cara DOM. Ini berbeda karena Anda tidak mengulangi tetapi mengarahkan langsung pada acara yang Anda butuhkan, tetapi di bawah ini saya akan memberikan jawaban yang lebih umum.

Saya memiliki gambar berturut-turut:

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

Dan gambar itu memiliki pengendali event klik yang melekat padanya:

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

Tujuan saya adalah untuk memperluas area yang dapat diklik ke seluruh baris, jadi saya pertama kali mendapatkan semua gambar dan baris relatif:

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

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

Sekarang di baris anwer yang sebenarnya saya lakukan sebagai berikut, memberikan jawaban untuk pertanyaan awal:

tr.click(this.onclick);

Jadi saya mengambil event handler langsung dari elemen DOM dan memasukkannya ke event handler klik jQuery. Bekerja seperti pesona.

Sekarang, untuk kasus umum. Di masa pra-jQuery dulu, Anda bisa membuat semua acara terlampir pada objek dengan dua fungsi sederhana namun kuat yang diberikan kepada kita manusia oleh 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;
      }
    }
  });
}

Coba plugin jquery debugger jika Anda menggunakan chrome: https://chrome.google.com/webstore/detail/jquery-debugger/dbhhnnnpaeobfddmlalhnehgclcmjimi?hl=id

Cara lain untuk melakukannya adalah dengan hanya menggunakan jQuery untuk mengambil elemen, kemudian pergi melalui Javascript aktual untuk mendapatkan dan mengatur dan bermain dengan penangan acara. Contohnya:

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

Saya menggabungkan beberapa jawaban di atas dan membuat skrip yang terlihat gila namun fungsional ini, yang semoga daftar sebagian besar pendengar acara pada elemen yang diberikan. Jangan ragu untuk mengoptimalkannya di sini.

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 tidak membiarkan Anda hanya mengakses acara untuk elemen tertentu. Anda dapat mengaksesnya menggunakan metode internal tidak berdokumen

$._data(element, "events")

Tapi itu masih tidak akan memberi Anda semua acara, tepatnya tidak akan menampilkan acara yang ditugaskan kepada Anda

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

Peristiwa ini disimpan di dalam dokumen, sehingga Anda dapat mengambilnya dengan menelusuri

$._data(document, "events")

tapi itu kerja keras, karena ada acara untuk seluruh halaman web.

Tom G di atas menciptakan fungsi yang memfilter dokumen hanya untuk peristiwa elemen yang diberikan dan menggabungkan output dari kedua metode, tetapi memiliki kesalahan duplikasi peristiwa dalam output (dan efektif pada daftar acara internal jQuery elemen yang mengacaukan aplikasi Anda). Saya memperbaiki kekurangan itu dan Anda dapat menemukan kode di bawah ini. Cukup rekatkan ke konsol dev Anda atau ke kode aplikasi Anda dan jalankan ketika diperlukan untuk mendapatkan daftar yang bagus dari semua acara untuk elemen yang diberikan.

Yang penting diperhatikan, elemen sebenarnya HTMLElement, bukan objek 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;
}