once ve passive seçenekleri
Bir dinleyicinin tek sefer çalışmasını ve passive ile performans kazanmayı öğrenirsin.
once seçeneği
Bir dinleyicinin yalnızca bir kez çalışmasını istiyorsan once: true seçeneğini kullanırsın. İlk tetiklenmeden sonra tarayıcı dinleyiciyi kendiliğinden kaldırır; tekrar tetiklenmez.
button.addEventListener('click', handleClick, { once: true });Bu seçenek özellikle ilk tıklamayla bir işlemi bir kez başlatmak istediğinde kullanışlıdır. Manuel removeEventListener çağrısına gerek kalmaz.
passive seçeneği
passive: true seçeneği, dinleyicinin içinde preventDefault çağrılmayacağını tarayıcıya bildirir. Böylece tarayıcı, dinleyiciyi beklemeden kaydırmaya hemen başlar. Bu özellikle scroll ve touchmove gibi olaylarda performansı artırır.
box.addEventListener('scroll', handleScroll, { passive: true });Eğer passive: true dinleyicisinde yine de preventDefault çağırırsan tarayıcı bir uyarı verir ve çağrı dikkate alınmaz.
Uygulama button için once: true dinleyicisi ekle
button değişkenini tanımla ve #button öğesini seç. click dinleyicisi ekle ve üçüncü parametre olarak { once: true } seçeneğini ver.
Örnek çözümü göster
const button = document.querySelector('#button');
button.addEventListener('click', () => {
console.log('clicked');
}, { once: true });Kendini test et
-
once: true seçeneği ne yapar?
button.addEventListener('click', () => { console.log('clicked'); }, { once: true });- Dinleyiciyi pasifleştirir
- Dinleyici yalnızca bir kez çalışır
- Dinleyici iki kez çalışır
- Dinleyiciyi hemen kaldırır
Cevabı göster
Dinleyici yalnızca bir kez çalışır — Doğru! once: true dinleyiciyi tek seferliğe sınırlar.
-
Tek seferlik seçeneği ekle
button.addEventListener('click', handleClick, {____: true });Cevabı göster
button.addEventListener('click', handleClick, {once: true }); -
Seçenekleri etkileriyle eşleştir
- once: true
- Tek sefer çalışır
- passive: true
- preventDefault çalışmaz
- { }
- Dinleyici seçenekleri