Bir zamanlar olay işleyici

Jeff Posnick

Twitter GitHub Ana sayfa

Kısa test: addEventListener()'e iletilen üçüncü parametrenin amacı nedir?

addEventListener() işlevinin yalnızca iki parametre aldığını düşünüyorsanız veya belki de her zaman false değerini sabit kodlayarak kabarcıklarla bir ilgisi olduğunu düşünüyorsanız utanmayın.

Daha yapılandırılabilir bir addEventListener()

Web'in ilk günlerinden beri addEventListener() yöntemi çok yol katetti ve yeni işlevi bu üçüncü parametrenin güçlendirilmiş bir sürümüyle yapılandırıldı. Yöntemin tanımında yapılan son değişiklikler, geliştiricilerin bir yapılandırma nesnesi aracılığıyla ek seçenekler sunmalarına olanak tanırken bir yandan da bir boole parametresi olduğunda veya bir seçenek belirtilmediğinde geriye dönük uyumlu kalmanızı sağlar.

Chrome 55'in, passive (Chrome 51'de uygulanmıştır) ve capture seçeneklerinin (Chrome 49'da uygulanmıştır) ile birlikte bu yapılandırma nesnesine once seçeneğini desteklediğini duyurmaktan mutluluk 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.

Kendinizi temizlemenin faydaları

Yeni once seçeneğinin söz dizimi bu şekildedir. Peki bu size ne kazandıracak? Kısacası, size "bir ve bitti" kullanım alanlarına özel olarak uyarlanmış bir etkinlik işleyici sunar.

Varsayılan olarak, etkinlik işleyiciler ilk çağrıldıktan sonra da devam eder. Bu da bazı etkinlik türleri (örneğin, birden fazla kez tıklanabilen düğmeler) için tercih edilir. Ancak diğer kullanımlarda, bir etkinlik işleyicinin bağlı kalması gerekli değildir ve yalnızca bir kez yürütülmesi gereken bir geri çağırmanız olduğunda istenmeyen davranışlara yol açabilir. Hijyenik geliştiriciler her zaman, aşağıdakiler gibi kalıpları uygulayarak açık bir şekilde temizlemek için removeEventListener() kullanma seçeneğine sahip olmuştur:

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 anlaşılırdır ve sizi etkinliğin adını (önceki örnekte event.type) veya geri çağırma işlevine (cb) başvuruyu takip etmeye zorlamaz:

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

Etkinlik işleyicilerinizi temizlemek de geri çağırma işleviyle ilişkili kapsamı yok ederek bellek verimliliği sağlayabilir ve bu kapsamda yakalanan değişkenlerin atık toplanmasına yol açabilir. Fark yaratacağı bir örnek verelim:

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ğırması tekrar kullanılmasa bile çalışması tamamlandığında kapsam içinde kalır. data değişkeni geri çağırmanın içinde kullanıldığından aynı zamanda kapsam dahilinde kalır ve hiçbir zaman çöp toplama işlemi yapmaz. Bununla birlikte, geri çağırma once parametresi aracılığıyla kaldırıldıysa hem işlevin kendisi hem de kapsamı aracılığıyla aktif tutulan her şey muhtemelen çöp toplama adayı olur.

Tarayıcı desteği

Chrome 55+, Firefox 50+ ve Safari'nin teknoloji önizlemesi 7+ once seçeneği için yerel destek içerir.

Birçok JavaScript kullanıcı arayüzü kitaplığı, etkinlik işleyici oluşturmak için pratik yöntemler sunar. Bazılarının ise tek seferlik etkinlikleri tanımlamak için kısayollar vardır. Bunların en önemlisi jQuery'nin one() yöntemidir. Andrea Giammarchi'nin dom4 kitaplığı kapsamında bir çoklu dolgu da kullanılabilir.

Teşekkür ederiz

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