JavaScript'in addEventListener yönteminin jQuery eşdeğeri

190

Bu JavaScript yöntemi çağrısının jQuery eşdeğerini bulmaya çalışıyorum:

document.addEventListener('click', select_element, true);

Şimdiye kadar aldım:

$(document).click(select_element);

ancak bu, JavaScript yönteminin son parametresi ile aynı sonucu elde etmez - olay işleyicinin yakalama veya köpürme aşamasında yürütülmesi gerekip gerekmediğini belirten bir boole ( http://www.quirksmode.org adresinden anladığım kadarıyla) /js/events_advanced.html ) - dışında bırakılır.

JQuery kullanarak bu parametreyi nasıl belirleyebilirim veya aynı işlevselliği nasıl elde edebilirim?

— beceriksizlik
kaynak

3

Olay yakalama jQuery tarafından desteklenmez, çünkü olay yakalama IE tarafından desteklenmez, hangi jQuery destekler;) IE uyumluluğu mu arıyorsunuz?

— Crescent Fresh

Teşekkürler, Crescent Fresh - Sanırım şimdi mantıklı. IE uyumluluğuna ihtiyacım var, bu yüzden yakalama aşamasını unutmam gerekiyor.

— Bungle

142

Tüm tarayıcılar olay yakalamayı desteklemez (örneğin, 9'dan küçük Internet Explorer sürümleri desteklemez), ancak hepsi olay köpürmeyi destekler, bu nedenle jQuery dahil tüm çapraz tarayıcı soyutlamalarındaki olaylara işleyicileri bağlamak için kullanılan aşamadır.

JQuery'de aradığınıza en yakın olanı bind()( on()jQuery 1.7+ içinde yerini alır ) veya olaya özgü jQuery yöntemlerini (bu durumda, zaten dahili olarak click()çağıran bind()) kullanmaktır. Hepsi yükseltilmiş bir olayın köpürme aşamasını kullanır.

— Russ Cam
kaynak

6

Görünüşe göre IE9 nihayet destekliyor. blogs.msdn.com/b/ie/archive/2010/03/26/…

— bazı

ve neden olay yakalamayı desteklemiyorlar? olay yakalamanın dezavantajları nelerdir?

— Aakash

2

Açık olmak gerekirse, OP'nin istediği şeyin mümkün olmadığını söylüyorsunuz - köpürme kullanmak zorundasınız ve yakalamayı kullanamazsınız. Sağ?

— Noumenon

115

JQuery 1.7'den itibaren, .on()şimdi bağlama olaylarının tercih edilen yöntemidir .bind():

itibaren adresinden :

JQuery 1.7'den itibaren .on () yöntemi, olay işleyicilerini bir belgeye iliştirmek için tercih edilen yöntemdir. Önceki sürümlerde, bir olay işleyicisini doğrudan öğelere eklemek için .bind () yöntemi kullanılır. İşleyiciler jQuery nesnesindeki seçili öğelere eklenir, bu nedenle bu öğelerin .bind () çağrısının gerçekleştiği noktada olması gerekir. Daha esnek olay bağlama için, .on () veya .delegate () içindeki olay yetkisi tartışmasına bakın.

Doküman sayfası http://api.jquery.com/on/ adresinde bulunmaktadır

Kabul edilen cevap bu sorunu gidermek için düzenlendi.

— Kullanıcı olmayan kullanıcı

51

En yakın şey bağlama fonksiyonu olacaktır:

http://api.jquery.com/bind/

$('#foo').bind('click', function() {
  alert('User clicked on "foo."');
});

— Ben Rowe
kaynak

14

Nota bir şey jQuery olay yöntemleri yangın / tuzak yok olmasıdır loadüzerinde embedSVG dom içinde ayrı bir doküman olarak hangi yükleri ihtiva etiketleri embedetiketi. Bunlar loadüzerinde bir olayı tuzağa düşürmenin tek yolu ham JavaScript kullanmaktı.

Bu işe yaramaz ( on/ bind/ loadyöntemleri denedim ):

$img.on('load', function () {
    console.log('FOO!');
});

Ancak, bu işe yarar:

$img[0].addEventListener('load', function () {
    console.log('FOO!');
}, false);

— tbjers
kaynak

1

eleman (lar) için başka bir bağlı olay işleyicisinin üzerine yazmak istemiyorsanız, bunun doğru yol olduğuna dikkat edilmelidir.

— r3wt

nedir $img?

— anatol

12

Şimdi .on()olayları bağlamak için bu fonksiyonu kullanmalısınız .

2

$( "button" ).on( "click", function(event) {

    alert( $( this ).html() );
    console.log( event.target );

} );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<button>test 1</button>
<button>test 2</button>

Snippet'i genişlet

— antelove
kaynak

1

Standart JavaScript için bu sorunun Mozilla Geliştirme Ağı'nda (MDN) mükemmel bir tedavi (jQuery'ye güvenmek veya genel olarak daha iyi anlamak istemiyorsanız):

https://developer.mozilla.org/en-US/docs/DOM/element.addEventListener

Yukarıdaki tedavideki bir bağlantıdan olay akışının bir tartışması:

http://www.w3.org/TR/DOM-Level-3-Events/#event-flow

Bazı önemli noktalar:

Bir etkinlik için tek bir işleyiciden fazlasını eklemeye izin verir
Dinleyici etkinleştiğinde (yakalama veya köpürme) fazın daha hassas kontrolünü sağlar
Yalnızca HTML öğelerinde değil, herhangi bir DOM öğesinde çalışır
Etkinliğe iletilen "this" değeri genel nesne (pencere) değil, öğenin tetiklendiği öğedir. Bu çok uygun.
Eski IE tarayıcıları için kod basittir ve "Eski Internet Explorer ve attachEvent" başlığı altında yer alır
İşleyiciyi anonim bir işleve eklerseniz parametreleri ekleyebilirsiniz

— Xitalogy
kaynak