Bir zamanlar olay işleyici

Jeff Posnick

Hızlı soru: addEventListener()?

addEventListener() adlı kişinin sadece iki sürdüğünü düşünüyorsanız utanmayın parametrelerini veya her zaman belirsiz bir false değeri alakalı olup olmadığını nasıl anlarsınız?

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

addEventListener() yöntemi, ilk ortaya çıktığından beri çok yol katetti çalışmasıdır ve yeni işlevi, bu aracın sunduğu üçüncü parametre. Yöntemin tanımında yapılan son değişiklikler, geliştiricilerin bir yapılandırma nesnesi aracılığıyla ek seçenekler sağlamasına bir boole parametresi olduğunda veya bir boole parametresi olduğunda seçeneği belirtilmemiş.

Chrome 55'in once seçeneği için destek eklediğini duyurmaktan mutluluk duyuyoruz. passive (Chrome 51'de uygulanır) ile birlikte bu yapılandırma nesnesini ve capture seçenekleri (Chrome 49'da uygulanır). Örneğin:

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

Bu seçenekleri kendi kullanım alanınıza uygun şekilde birlikte kullanabilirsiniz.

Sonra da temizlik yapmanın faydaları

Yeni once seçeneğini kullanmak için söz dizimi bu şekildedir, ancak bu sen? Kısacası, size "tek ve bitmiş" için özel olarak tasarlanmış bir etkinlik işleyici sunar. örnekler üzerinden görüntüleyebilirsiniz.

Etkinlik işleyiciler varsayılan olarak ilk çağrılmalarından sonra da devam eder. Bu işlem, bazı etkinlik türlerinde istediğiniz şeydir. Birden fazla tıklanabilen düğmeler sağlayabilir. Diğer kullanım alanları için, bir etkinlik işleyici çubuğu gereksizdir ve istenmeyen davranışlara neden olursa yalnızca bir kez yürütülmesi gereken geri çağırmayı içerir. Hijyenik geliştiriciler her zaman öğeleri açıkça temizlemek için removeEventListener() kullanma seçeneği, şunun gibi kalıplar vardır:

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

Yeni once parametresinden yararlanılarak eşdeğer kod daha temizdir ve etkinlik adını (event.type, önceki örnekte) veya geri çağırma işlevine (cb) bir referans:

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

Etkinlik işleyicilerinizi temizlemek, verileri yok ederek bellek verimliliği de sağlayabilir. geri çağırma işleviyle ilişkilendirilmiş kapsamı kullanarak kapsayıcıların çöp toplamasına izin vermez. Burada, dönüşüm hunisinin üst kısmındaki fark:

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ı çalışmasını bitirebilir. Çünkü data değişkeni geri çağırma içinde kullanılırsa kapsam dahilinde kalır ve hiçbir zaman toplanıyor. Fakat geri çağırma once parametresi aracılığıyla kaldırıldıysa hem işlevin kendisi ve kapsamı üzerinden canlı tutulan her şey, atık toplamaya aday olabilir.

Tarayıcı desteği

Chrome 55+, Firefox 50+ ve Safari'nin teknoloji önizlemesi 7+ için yerel desteğe sahip olma once seçeneği.

Birçok JavaScript kullanıcı arayüzü kitaplığı, etkinlik oluşturmak için kolaylık yöntemleri sunar işleyicileridir, bazıları ise tek seferlik etkinlikleri tanımlarken kullanılan kısayollar içerir. Bunlardan biri, jQuery'nin one() yöntemidir. Çoklu dolgu Ayrıca Andrea Giammarchi'nin dom4 kitaplığı.

Teşekkürler

Ingvar Stepanyan'a şu konuyla ilgili geri bildirim verin: örnek koda değineceğiz.