Bir zamanlar olay işleyici

Jeff Posnick

Eğlenceli test: addEventListener() işlevine iletilen üçüncü parametrenin amacı nedir?

addEventListener()'ün yalnızca iki parametre aldığını düşünüyorsanız veya false değerini her zaman kodunuza sabitliyorsanız ve bunun balonlarla bir ilgisi olduğunu düşünüyorsanız utanmayın.

Daha yapılandırılabilir addEventListener()

addEventListener() yöntemi, web'in ilk günlerinden bu yana çok yol kat etti ve yeni işlevi, üçüncü parametrenin güçlendirilmiş bir sürümü aracılığıyla yapılandırılır. Yöntemin tanımında yapılan son değişiklikler, geliştiricilerin bir yapılandırma nesnesi aracılığıyla ek seçenekler sunmasına olanak tanır. Bu sayede, doğru/yanlış parametresi olduğunda veya bir seçenek belirtilmediğinde geriye dönük uyumluluk korunur.

Chrome 55'te, bu yapılandırma nesnesinde passive (Chrome 51'de uygulandı) ve capture seçeneklerinin (Chrome 49'da uygulandı) yanı sıra once seçeneğinin de desteklendiğini duyurmaktan memnuniyet duyuyoruz. Örneğin:

element.addEventListener('click', myClickHandler, {
    once: true,
    passive: true,
    capture: true
});

Bu seçenekleri kendi kullanım alanınıza uygun şekilde karıştırıp eşleştirebilirsiniz.

Kendinden sonra temizlemenin avantajları

Yeni once seçeneğini kullanmanın söz dizimi budur. Peki bu seçeneği kullandığınızda ne elde edersiniz? Özetle, "tek seferlik" kullanım alanlarına özel bir etkinlik işleyici sağlar.

Varsayılan olarak etkinlik dinleyicileri, ilk kez çağrıldıktan sonra devam eder. Bu, bazı etkinlik türleri (ör. birden çok kez tıklanabilen düğmeler) için istediğiniz durumdur. Ancak diğer kullanımlar için bir etkinlik işleyicinin kalıcı olması gerekli değildir ve yalnızca bir kez çalıştırılması gereken bir geri çağırma işleviniz varsa istenmeyen davranışlara neden olabilir. Hijyenik geliştiriciler her zaman removeEventListener() kullanarak açıkça temizleme yapma seçeneğine sahipti. Örneğin:

element.addEventListener('click', function cb(event) {
    // ...one-time handling of the click event...
    event.currentTarget.removeEventListener(event.type, cb);
});

Yeni once parametresini kullanan eşdeğer kod daha temizdir ve sizi etkinliğin adını (önceki örnekte event.type) veya geri çağırma işlevine (cb) referansı takip etmeye zorlamaz:

element.addEventListener('click', function(event) {
    // ...one-time handling of the click event...
}, {once: true});

Etkinlik işleyicilerinizi temizlemek, geri çağırma işleviyle ilişkili kapsamı yok ederek bellek verimliliği de sağlayabilir. Bu sayede, bu kapsamda yakalanan tüm değişkenler çöp toplanabilir. Bu tür bir değişikliğin fark yaratacağı bir örnek aşağıda verilmiştir:

function setUpListeners() {
    var data = ['one', 'two', '...etc.'];

    window.addEventListener('load', function() {
    doSomethingWithSomeData(data);
    // data is now part of the callback's scope.
    });
}

Varsayılan olarak, load etkinlik işleyici geri çağırma işlevi, çalışmayı tamamladığında hiçbir zaman tekrar kullanılmasa bile kapsamda kalır. data değişkeni geri çağırma işlevi içinde kullanıldığı için kapsamda kalır ve hiçbir zaman çöp toplanma işlemine tabi tutulmaz. Ancak geri çağırma işlevi once parametresi aracılığıyla kaldırıldıysa hem işlevin kendisi hem de kapsamı aracılığıyla etkin tutulan her şey potansiyel olarak çöp toplama için aday olur.

Tarayıcı desteği

Chrome 55 ve sonraki sürümler, Firefox 50 ve sonraki sürümler ve Safari'nin teknoloji önizlemesi 7 ve sonraki sürümleri, once seçeneği için yerel desteğe sahiptir.

Birçok JavaScript kullanıcı arayüzü kitaplığı, etkinlik dinleyicileri oluşturmak için kolaylık sağlayan yöntemler sunar. Bazılarında ise tek seferlik etkinlikleri tanımlamak için kısayollar bulunur. Bunlardan en dikkat çekeni jQuery'nin one() yöntemidir. Andrea Giammarchi'nin dom4 kitaplığı kapsamında bir polyfill de mevcuttur.

Teşekkürler

Bu yayındaki örnek kodla ilgili geri bildirimi için Ingvar Stepanyan'a teşekkür ederiz.