Pano değişikliği etkinliğini test etme: Panoyu izlemenin daha verimli bir yolu

Rohan Raja
Rohan Raja
LinkedIn
Patrick Brosset
Patrick Brosset
Ana sayfa

Yayınlanma tarihi: 23 Eylül 2025

clipboardchange etkinliği, Microsoft Edge ekibi tarafından Chrome'a eklenen yeni bir özelliktir. Bu sayede, pano değişikliklerini yoklama performans yükü olmadan verimli bir şekilde izleyebilirsiniz.

Artık 140. sürümden itibaren hem Chrome hem de Edge'de kaynak denemesiyle clipboardchange etkinliğini test edebilirsiniz. Bu yeni özelliği test ederken geri bildirimlerinizi bekliyoruz. Nihayetinde bu özelliği standartlaştırmayı hedefliyoruz.

Değişiklikleri algılamak için panoyu yoklamanın zorlukları

Sistem panosunda hangi içeriklerin bulunduğunu öğrenmek için verimsiz yoklama yöntemleri kullanmanız gerekir. Örneğin, metin düzenleme web uygulamaları, panoda metin, resim veya HTML içeriği olup olmadığına bağlı olarak farklı "Yapıştır" düğmelerini etkinleştirmek isteyebilir.

Bunu yapmak için mevcut yaklaşımda, aşağıdaki kod snippet'inde gösterildiği gibi, pano içeriğini kontrol etmek üzere navigator.clipboard.read() yöntemini tekrar tekrar çağırmanız gerekir:

// Inefficient polling approach
setInterval(async () => {
  try {
    const clipboardItems = await navigator.clipboard.read();
    updatePasteButtons(clipboardItems);
  } catch (err) {
    console.error('Failed to read clipboard:', err);
  }
}, 1000); // Poll every second

Bu yöntem işe yarasa da önemli dezavantajları vardır.

Performansa olan etkisi

Sürekli olarak panoyu yoklamak gereksiz yük oluşturur. navigator.clipboard.read() işlevine yapılan her çağrı, sistem düzeyinde pano erişimi gerektirir. Bu durum, özellikle kaynak kısıtlamalı cihazlarda uygulamanızın performansını olumsuz etkileyebilir. Yoklama sıklığı, yanıt verme hızı ile performans arasında bir denge kurmayı gerektirir.

Pilin hızlı tükenmesi

Mobil cihazlarda, sık sık pano yoklaması yapmak pilin boşalmasına neden olabilir. Bunun nedeni, kullanıcı içeriği aktif olarak kopyalamıyor veya yapıştırmıyor olsa bile uygulamanın sürekli olarak sistem kaynaklarına erişmesidir.

Kullanıcı deneyimi tutarsızlıkları

Yoklama aralığı, içeriğin kopyalanması ile kullanıcı arayüzünün yeni pano durumunu yansıtacak şekilde güncellenmesi arasında gecikmelere neden olur. Kullanıcılar, eski yapıştırma düğmesi durumlarını görebilir veya doğru seçeneklerin kullanılamadığı kısa süreler yaşayabilir.

Aşırı yoklamayla ilgili gizlilik endişeleri

Uygulamalar, değişmemiş olsa bile sürekli olarak pano verilerini okuduğundan sık sık pano erişimi gizlilik endişelerine yol açabilir. Bu durum, pano içeriklerinin gizliliği konusunda hassas olan kullanıcılar için rahatsız edici olabilir.

clipboardchange etkinliği

Bu zorlukları gidermek için clipboardchange adlı yeni bir etkinlik uyguladık ve hem Edge hem de Chrome'da bir kaynak denemesi başlatıyoruz. Böylece bu etkinliği uygulamalarınızda test edebilirsiniz.

Bu etkinlik, web uygulamalarının panodaki değişiklikleri proaktif olarak yoklamak yerine tepkisel olarak yanıtlamasına olanak tanır. Herhangi bir uygulamadan panoya içerik kopyalandığında veya kesildiğinde, pano temizlendiğinde ya da içerik yapıştırıldığında (bazı durumlarda panoyu temizleyebilir) otomatik olarak tetiklenir. Etkinlik yalnızca doküman odaklandığında tetiklenir.

clipboardchange etkinliğini, navigator.clipboard arayüzüne burada gösterildiği gibi bir dinleyici ekleyerek dinleyebilirsiniz:

navigator.clipboard.addEventListener('clipboardchange', event => {
  console.log('Clipboard content changed!');
  console.log('Available MIME types:', event.types);

  // Update UI based on available formats
  updatePasteButtons(event.types);
});

Temel avantajlar

clipboardchange etkinliği, yoklamaya kıyasla çeşitli avantajlar sunar:

  • Verimli: Etkinlikler yalnızca değişiklikler gerçekten gerçekleştiğinde tetiklenir.
  • Gizliliği koruma: Etkinlik yalnızca yerel MIME türlerini gösterir, gerçek içeriği göstermez.
  • İzin istemi yok: Hassas veriler açığa çıkmadığı için kullanıcı izni gerekmez.
  • Anında yanıt verme: Pano içeriği değiştiğinde kullanıcı arayüzü anında güncellenir.
  • Odaklanmaya duyarlı: Etkinlikler yalnızca doküman odaklandığında tetiklenir.

types özelliği

clipboardchange etkinlik nesnesi, panoda bulunan MIME türlerinin dizisini içeren bir types özelliği içerir:

navigator.clipboard.addEventListener('clipboardchange', event => {
  // Example types array: ['text/plain', 'text/html', 'image/png']
  const hasText = event.types.includes('text/plain');
  const hasImage = event.types.includes('image/png');
  const hasHtml = event.types.includes('text/html');

  // Enable/disable paste buttons accordingly
  document.getElementById('paste-text').disabled = !hasText;
  document.getElementById('paste-image').disabled = !hasImage;
  document.getElementById('paste-html').disabled = !hasHtml;
});

Odaklanma davranışı

Doküman odaklanmamışken pano değişiklikleri olursa doküman sisteme yeniden odaklandığında tek bir clipboardchange etkinliği tetiklenir. Geçmiş pano değişikliği bilgileri kullanılamaz. Yalnızca sayfa odaklandığında kullanılabilen türler types üyesine dahil edilir.

clipboardchange etkinliğini bugün test edin

Yeni clipboardchange etkinliğini bugün test edebilirsiniz:

  • Yalnızca tarayıcınızda özelliği etkinleştirerek yerel olarak.
  • Alternatif olarak, üretim web uygulamanızda kaynak denemesine kaydolarak da yapabilirsiniz.

Daha iyi uyumluluk için clipboardchange etkinliğini algılama

Öncelikle bu yeni bir özellik olduğundan, kullanmadan önce desteklenip desteklenmediğini tespit etmeniz gerekir. Bunu, navigator.clipboard üzerinde onclipboardchange özelliğinin varlığını test ederek yapabilirsiniz. Testin nasıl yapılacağını burada görebilirsiniz:

if ('onclipboardchange' in navigator.clipboard) {
  // The clipboardchange event is supported
  navigator.clipboard.addEventListener('clipboardchange', handleClipboardChange);
} else {
  // Fallback to polling or other methods
  console.log('clipboardchange event not supported, using fallback');
  setInterval(checkClipboard, 2000);
}

Yerel olarak test etme

Yalnızca tarayıcınızda clipboardchange etkinliğini test etmek için:

  1. about://flags sayfasını açın.
  2. Arama işaretleri kutusunda ClipboardChangeEvent işaretini arayın.
  3. Açılır menüyü kullanarak değeri Varsayılan'dan Etkin olarak değiştirin.
  4. Tarayıcınızı yeniden başlatın.

Denemeye kaydolma

Sitenizdeki clipboardchange etkinliğini gerçek kullanıcılarla denemek için Chrome veya Edge'de kaynak denemesine kaydolun. Kaynak denemesi, Chrome ve Edge'in 140 ile 142 sürümleri arasında (2 Eylül 2025 ile 2 Aralık 2025 arasında) gerçekleştirilecektir.

Kaynak denemeleri hakkında daha fazla bilgi edinmek ve kaynak denemelerini kullanmaya başlamak için Kaynak denemelerini kullanmaya başlama başlıklı makaleyi okuyun.

Demo

Etkinliği işlem gerçekleştirirken görmek için demomuzu inceleyin ve GitHub'daki kaynak koduna göz atın.

Bu demoda, clipboardchange etkinliğinin, pano içeriklerinize göre otomatik olarak güncellenen duyarlı bir yapıştırma arayüzü oluşturmak için nasıl kullanılabileceği gösterilmektedir.

Farklı içerik türlerini (metin, resim, HTML) kopyalamayı deneyin ve yapıştırma düğmelerinin herhangi bir yoklama olmadan anında nasıl etkinleştirilip devre dışı bırakıldığını görün.

Geri bildirim

clipboardchange etkinliğinin kullanım alanlarınızda nasıl çalıştığıyla ilgili görüşlerinizi bizimle paylaşmanızı rica ederiz. W3C/clipboard-apis deposunda sorun oluşturarak geri bildirimde bulunun.
Bu özelliğe olan ilginizle ilgili herkese açık sinyaller, bu özelliğin sizin için önemini anlamamıza ve standardizasyon sürecini bilgilendirmemize yardımcı olur.

Bu etkinlik, aşamalı geliştirme olarak kullanılabilse de bunu Pano API spesifikasyonunun bir parçası olarak standartlaştırmak ve sonunda tüm tarayıcılar tarafından benimsenmesini sağlamak istiyoruz. Şimdilik yoklama veya diğer pano izleme tekniklerini kullanabilirsiniz.

Daha fazla bilgi