Javascript ile Bir Objenin Tüm EventListenerlarını Kaldırmak

Bugün yine üzerinde çalıştığım bir projede sabahlarken, recursive bir şekilde oluşturmaya çalıştığım ve her seferinde bir elemente verdiğim eventListener fonksiyonunu değiştirmem gerekiyordu. Burada eventListener fonksiyonları hakkında bilmemiz gereken şey, assignable şekilde değil, stackable şekilde çalışıyor olduklarıdır.

Yani;

var btn = document.getElementById("btn");
btn.addEventListener("click", fnc1);
btn.addEventListener("click", fnc2);

Bu tür bir düzende btn div'ine tıklandığında hem fnc1() hem de fnc2() fonksiyonları sırasıyla çalışacaktır. Eğer bu durumun olmasını istemiyorsanız, ki benim durumumda ben bunun olmasını istemiyordum;

var btn = document.getElementById("btn");
btn.addEventListener("click", fnc1);
btn.removeEventListener("click", fnc1);

btn.addEventListener("click", fnc2);

Benzeri bir kod ile removeEventListener() metodu ile atadığınız event fonksiyonunu stackten kaldırmanız gerekiyor. Fakat benim durumumda event fonksiyonları satır içi fonksiyonlardı ve bu satır içi fonksiyonlar, o scope içerisindeki objelerin fonksiyonlarını kullanıyor, ek olarak tahmin edebileceğiniz gibi eventListener ekleme ve kaldırma işlemlerini çok farklı scopelar içinde yapıyordum.

Bu da demek oluyor ki, sırf bir event için özel imza ismi olan fonksiyon oluşturup bunları kullanmam mantıklı değildi.

Bunun yerine yapmak istediğim şey, bir elementin üzerindeki tüm EventListener event fonksiyonlarını kaldırmaktı. Her seferinde eventleri wipe ederek yeni eventi ekleyebilirdim. Fakat, her ne kadar bu eventlerin bir stacki olduğu çok belli olmasına rağmen bu eventleri listeleyip manipüle edebileceğimiz bir geliştirici arayüzü bulunmuyor. (Şuradaki bug reporta da bu sorun yansımış.)

Sorun Çözümü

Bunun yerine sayfadaki objenin bir kopyasını alarak, objeyi sayfadan kaldırıp, kopyasını aldığım DOM objesini tekrar aynı parent içine atarsam, event entrylerinin silineceğini düşünerek şu çözümü buldum;

var Btn = document.getElementById("btn")
var BtnClone = Btn.cloneNode(true);
    Btn.parentNode.replaceChild(BtnClone, Btn);

Şansıma sayfada çok fazla DOM elementi yok ve bu işlemi uygulamanın kullanıldığı yaklaşık 2-3 dk'da bir gerçekleştiriyorum, bu işlemi bir loop içinde yapacak veya sık kullanacak olsaydım bu çözüm sorumsuzca olacaktı. Fakat bu sistem için güzel bir çözüm 🙂

Yorumları Göster veya Yeni Yorum Yaz