JQuery ile bir öğeye bağlı olayları bulabilir miyim?

Bu olayda iki olay işleyiciyi bağlarım:

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

JavaScript:

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

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

Bir öğeye bağlı tüm olayların bir listesini almanın herhangi bir yolu var mı id="elm"?

JQuery'nin modern sürümlerinde, $._datasöz konusu öğeye jQuery tarafından eklenen olayları bulmak için yöntemi kullanırsınız. Not , bu bir iç kullanım tek yöntemdir:

// 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" );

Sonuç, $._dataayarladığımız her iki etkinliği de içeren bir nesne olacaktır ( mouseoutözellik genişletilerek aşağıda resmedilmiştir ):

Ardından, Chrome'da, işleyici işlevini sağ tıklayıp kodunuzda tam olarak tanımlandığı noktayı göstermek için "işlev tanımını görüntüle" yi tıklayabilirsiniz.

Genel dava:

• Hit F12açık Dev Araçlarına
• Click Sourcessekmesini
• Sağ tarafta, Event Listener Breakpointsağacı aşağı kaydırın ve ağacı genişletin
• Dinlemek istediğiniz olayları tıklayın.
• Hedef elemanla etkileşime geçin, ateş ederse hata ayıklayıcıda bir kırılma noktası elde edersiniz

Benzer şekilde şunları yapabilirsiniz:

• hedef öğeye sağ tıklayın -> " Inspect element" seçin
• Geliştirme çerçevesinin sağ tarafında aşağı kaydırın, alt kısımda ' event listeners'.
• Öğeye hangi olayların eklendiğini görmek için ağacı genişletin. Bu, köpürme yoluyla işlenen etkinlikler için işe yarayıp yaramadığından emin değilim (tahmin etmiyorum)

Bunu gelecek nesiller için ekliyorum; Daha fazla JS yazmayı gerektirmeyen daha kolay bir yol var. Firefox için şaşırtıcı firebug eklentisini kullanarak ,

1. Öğeyi sağ tıklayın ve 'Öğeyi Firebug ile incele'yi seçin
2. Kenar çubuğu panellerinde (ekran görüntüsünde gösterilir), minik> oku kullanarak etkinlikler sekmesine gidin
3. Olaylar sekmesi, her olay için olayları ve karşılık gelen işlevleri gösterir
4. Yanındaki metin fonksiyonun yerini gösterir

Artık getEventListeners () javascript işlevini kullanarak bir nesneye bağlı olay dinleyicilerinin listesini alabilirsiniz.

Örneğin, dev araçlar konsoluna aşağıdakileri yazın:

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

JQuery Denetim eklentisi eklentisi normal Chrome Dev Araçları üzerinden bunu yapmasına izin gerekir. Mükemmel değil, ancak gerçek işleyiciyi yalnızca genel jQuery işleyicisine değil, öğeye / olaya bağlı görmenize izin vermelidir.

Bu, jQuery seçicileri / nesnelerine tam olarak özgü olmasa da, FireFox Quantum 58.x'te, Dev araçlarını kullanarak bir öğedeki olay işleyicilerini bulabilirsiniz:

1. Öğeyi sağ tıklayın
2. Bağlam menüsünde 'Öğeyi Denetle'yi tıklayın
3. Öğenin yanında (ev kutusu) bir 'ev' simgesi varsa, 'ev' simgesini tıklayın
4. Bu öğe ve olay işleyici için tüm olayları görüntüler

($ ._ data ($ ("a.wine-item-link") [0]). Events == null) {... bir şey yapın, olay işleyicilerini hemen tekrar bağlayın} öğem herhangi bir etkinliğe bağlıysa. Tüm olay işleyicilerinizi bu öğeden atamamışsanız yine de undefined (null) diyecektir. Bunu bir if ifadesinde değerlendirmemizin nedeni budur.

Olayların söz konusu öğeden ziyade belgenin kendisine eklenebileceğini unutmayın. Bu durumda şunları kullanmak isteyeceksiniz:

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

Ve olayı doğru seçiciyle bulun :

Ve sonra işleyiciye bakın > [[FunctionLocation]]

Biraz karmaşık DOM sorgusu gibi $ ._ veri geçirdiğimde: $._data($('#outerWrap .innerWrap ul li:last a'), 'events')tarayıcı konsolunda tanımsız atar.

Bu yüzden $._data($('#outerWrap')[0], 'events')bir etiket için olayları görmek için üst div: $ ._ verileri kullanmak zorunda kaldı . İşte aynısı için bir JSFiddle: http://jsfiddle.net/giri_jeedigunta/MLcpT/4/