Ad alanı vanilla jQuery

Question

gibi JavaScript olayları jQuery'de, bir etkinlik ayarladığınızda, onu adlandırabilirsiniz. Bu, eğer isterseniz (örneğin), birden fazla yeniden boyutlandırma penceresi olayına sahip olabilirsiniz ve bu seçicideki tüm olayları çözmeden bunları tek tek çözebilirsiniz. jQuery için ad alanı

Örnek:

$(window).on('scroll.myScrollNamespace, function() ...

ben düz JavaScript bir ad alanı oluşturabilirsiniz merak ediyorum. Bu tabii ki işe yaramaz:

window.addEventListener('resize.myScrollNamespace', function() ...

Answer 1

ise yerine isimsiz bir işlev:

window.addEventListener('resize', function myScroll() {...}); 

ardından kullanmak mümkün olabilir:

window.addEventListener('resize', function() {...}); 

adlandırılmış bir işlevi kullanın:

window.removeEventListener('resize', myScroll); 

Kapsam içinde myScroll olduğundan emin olun. Bunları eklemek daha farklı bir yerde dinleyicileri kaldırdığınızda, belki biraz dış kapsamında Fonksiyonlarınızı tanımlayıp removeEventListener aynı şekilde addEventListener adlarını kullanmalıdır: için

function myScroll() { 
    // ... 
} 

window.addEventListener('resize', myScroll); 

window.removeEventListener('resize', myScroll); 

İsterseniz Bir anda birçok dinleyiciyi kaldırabileceksiniz, sonra bunları bir dizi içinde saklamanız ve öğelerinin her biri için removeEventListener öğesini çağırmanız gerekecektir.

EventTarget.removeEventListener() belgelerine bakın.

Answer 2

@rsp yanıtı doğru işleyiciyi kaldırma sorununu çözdüğü için, gerçekten ad boşaltma sorununu çözmez. senin için ad her bölümü için bir tane - bu aslında birkaç olay dinleyicilerini ayarlar:

function on(elm, evtName, handler) { 
    evtName.split('.').reduce(function(evtPart, evt) { 
    evt = evt ? evt +'.'+ evtPart : evtPart; 
    elm.addEventListener(evt, handler, true); 
    return evt; 
    }, ''); 
} 

function off(elm, evtName, handler) { 
    evtName.split('.').reduce(function(evtPart, evt) { 
    evt = evt ? evt +'.'+ evtPart : evtPart; 
    elm.removeEventListener(evt, handler, true); 
    return evt; 
    }, ''); 
} 

// Your handler 
function onScroll(e) { ... } 

// To bind it 
on(window, 'scroll.myScrollNamespace', onScroll); 

// To unbind it 
off(window, 'scroll.myScrollNamespace', onScroll); 

Yani Özetle: Böyle biraz daha kodlama yapmak gerekir bu işlemek için. Bu işlevsellik maalesef doğal olarak desteklenmemektedir, ancak görebileceğiniz gibi nispeten basit bir şekilde elde edilebilir. Sadece bu betik derin ad alanını (ör. scroll.parent.child) desteklese bile, çok fazla olay dinleyicisine (bu durumda 3) bağlanmasına ve böylece tavsiye edilmemesine dikkat edin.

Bunu daha fazla performansla yapabilirsiniz, ancak bunu halledebilirsiniz.