JavaScript'te İşaretçi Olayları Nasıl Kullanılır?

Temel Çıkarımlar

• Web uygulamaları, daha geniş bir kitleye hitap edebilmek için yalnızca fareyi değil, çeşitli giriş aygıtlarını da desteklemelidir.
• JavaScript'teki işaretçi olayları hem fare hem de dokunma olaylarını yönetir ve bunları ayrı ayrı uygulama ihtiyacını ortadan kaldırır.
• İşaretçi olayları, fare olaylarıyla benzer adlara ve işlevlere sahiptir; bu, dokunma ve kalem girişlerini desteklemek için mevcut kodun güncellenmesini kolaylaştırır.

Birçok web uygulaması, kullanıcının işaretleme cihazının bir fare olacağını varsayar ve bu nedenle etkileşimleri yönetmek için fare olaylarını kullanır. Ancak dokunmatik ekranlı cihazların artmasıyla birlikte kullanıcıların web siteleriyle etkileşimde bulunmak için fareye ihtiyacı kalmadı. Mümkün olan en geniş kitleye hitap etmek için çeşitli giriş cihazlarını desteklemek önemlidir.

JavaScript'in işaretçi olayları adı verilen daha yeni bir standardı vardır. Hem fare hem de dokunma olaylarını yönetir, böylece bunları ayrı ayrı uygulama konusunda endişelenmenize gerek kalmaz.

İşaretçi Olayları Nelerdir?

İşaretçi olayları, bir web tarayıcısında fare, dokunma ve kalem dahil olmak üzere farklı giriş yöntemlerini kullanmanın birleşik bir yolunu tanımlayan bir web standardıdır. Bu etkinlikler, farklı cihazlardaki web içeriğiyle etkileşim kurmanın tutarlı ve platformdan bağımsız bir yolunu sağlar.

Özetle, işaretçi olayları, kaynaktan bağımsız olarak bu grup kullanıcı etkileşimlerini yönetmenize yardımcı olur.

İşaretçi Olayı Türleri

İşaretçi olayları, zaten aşina olabileceğiniz fare olaylarına benzer şekilde adlandırılır. Her biri için fareEvent JavaScript'te buna karşılık gelen bir işaretçi Olayı. Bu, eski kodunuzu tekrar ziyaret edebileceğiniz ve dokunma ve kalem girişlerini desteklemeye başlamak için "fareyi" "işaretçi" olarak değiştirebileceğiniz anlamına gelir.

Aşağıdaki tablo, fare olaylarıyla karşılaştırmalı olarak farklı işaretçi olaylarını gösterir:

Karşılık gelen fare olayları olmadan üç ekstra işaretçi olayının olduğunu görebilirsiniz. Bu olayları daha sonra öğreneceksiniz.

JavaScript'te İşaretçi Olaylarını Kullanma

İşaretçi olaylarını, fare olaylarını kullandığınız gibi kullanabilirsiniz. Çoğu olay işlemede olduğu gibi, süreç de genellikle şu modeli izler:

1. DOM seçici kullanma Bir öğeyi getirmek için.
2. Kullanmak addEventListener yöntemini kullanarak ilgilendiğiniz olayı ve bir geri arama işlevini belirtin.
3. Geri çağırma argümanının özelliklerini ve yöntemlerini kullanın; Etkinlik nesne.

İşte pointermove olayını kullanan bir örnek:

// Get the target element
const target = document.getElementById('target');
// Add an event listener to your target element
target.addEventListener('pointermove', handlePointerMove);
// Function to handle pointer move event
functionhandlePointerMove(ev) {
// Handle the event however you want to
 target.textContent = `Moved at x: ${ev.clientX}, y: ${ev.clientY}`;
}

Bu kod bloğu bir hedef öğeyi tanımlar ve bir JavaScript işlevi idare etmek işaretçi hareketi olay o zaman bir kullanır JavaScript olay dinleyicisi işaretçi olayını ve işlevi hedef öğeye eklemek için.

Bu kodu kullanarak, "hedef" kimliğine sahip bir öğe, imlecinizi, parmağınızı veya kaleminizi onun üzerine getirdiğinizde işaretçinin koordinatlarını görüntüleyecektir:

Diğer işaretçi olaylarını da aynı şekilde kullanabilirsiniz.

İşaretçi iptal olayı

Pointercancel olayı, başlangıçta amaçlandığı gibi işlemini tamamlamadan başka bir işaretçi olayı kesintiye uğradığında tetiklenir. Normalde tarayıcı, daha önce etkin olan işaretçi olayını iptal eder. Bunun birçok nedeni var işaretçi iptal olay tetikleyebilir, örneğin:

• Kullanıcı, bir öğeyi ekran boyunca sürüklerken bir telefon görüşmesi veya başka bir kesintiye uğrayan bildirim aldığında.
• Cihazın yönü değiştiğinde.
• Tarayıcı penceresi odağı kaybettiğinde.
• Kullanıcı başka bir sekmeye veya uygulamaya geçtiğinde.

İle işaretçi iptal Bu durumlarla dilediğiniz gibi başa çıkabilirsiniz. İşte bir örnek:

const target = document.getElementById('target');
target.addEventListener('pointercancel', (event) => {
// Handle the situation where the pointer cancels. For example, you
// can release the pointer capture
 target.releasePointerCapture(event.pointerId);
});

İşaretçi Yakalama

İşaretçi yakalama, belirli bir işlemin yapılmasını sağlayan bir özelliktir. HTML öğesi belirli bir işaretçiye ilişkin tüm işaretçi olaylarını, bu olaylar öğenin sınırları dışında gerçekleşse bile yakalar ve bunlara yanıt verir.

Bir öğe için işaretçi yakalamayı şununla ayarlayabilirsiniz: ayar noktası yakalama() yöntemini kullanın ve bir işaretçi yakalamayı serbest bırakın Releasepointercapture() yöntem.

Gotpointercapture Ve Kayıp işaret yakalama işaretçi olayları işaretçi yakalama için kullanışlıdır.

Gotpointercapture Etkinliği

Gotpointercapture Bir öğe işaretçi yakalamayı kazandığında olay tetiklenir. Bu olayı, HTML öğenizin işaretçi olaylarını işlemesi için bir durumu başlatmak amacıyla kullanabilirsiniz. Örneğin, bir çizim uygulamasında şunları kullanabilirsiniz: Gotpointercapture İmlecin başlangıç ​​konumunu ayarlamak için olay.

Lostpointercapture Etkinliği

Kayıp işaret yakalama Bir öğe işaretçi yakalamayı kaybettiğinde olay tetiklenir. Öğe işaretçi yakalamayı kazandığında oluşturulan herhangi bir durumu temizlemek veya kaldırmak için bunu kullanabilirsiniz. Bir çizim uygulamasında kullanmak isteyebilirsiniz Kayıp işaret yakalama İmleci gizlemek için.

İşaretçi Olaylarının Özellikleri

İşaretçi etkinlikleri, web sitenizi daha etkileşimli ve duyarlı hale getirmenize yardımcı olacak özelliklere sahiptir. Fare olaylarının özellikleri, işaretçi olaylarında bulacağınız özelliklerin aynısına ek olarak bazı ek özelliklerdir. Bu makalede bazı ek özellikler açıklanmaktadır.

pointerId Özellik

işaretçi kimliği kalem, parmak veya fare gibi her benzersiz işaretçi girişini tanımlamanıza yardımcı olan bir işaretçi olayı özelliğidir. Her işaretçi girişi, bunları izlemenize ve bunlar üzerinde işlem yapmanıza olanak tanıyan benzersiz bir kimlik (tarayıcı tarafından otomatik olarak oluşturulan) alır.

için harika bir kullanım işaretçi kimliği Property, kullanıcıların aynı anda birden fazla parmağı veya kalemi kullandığı bir oyun uygulamasıdır. işaretçi kimliği özelliği, her birine benzersiz bir kimlik atayarak her işaretçi yüzeyini takip etmenize olanak tanır. Birincil kimlik, ilk işaretçi girişine atanır.

Bu özellik özellikle dokunmatik cihazlar için kullanışlıdır. Fare işaretçilerine dayanan aygıtlar, kendilerine herhangi bir harici aygıt bağlanmadan aynı anda yalnızca bir işaretçi girişine sahip olabilir.

Her işaretçi girişinin kimliğini konsola yazdıran basit bir örnek:

const target = document.getElementById('target');
target.addEventListener('pointerdown', (event) => {
console.log(`Pointer ID: ${event.pointerId}`);
// Handle the pointer down event for the specific pointerId
});

pointerType Özelliği

pointerType özelliği, farklı türdeki işaretçi girişlerini ayırt etmenize yardımcı olur ve bunlara dayalı olarak işlemler gerçekleştirmenize olanak tanır. Fare, kalem ve parmak dokunuşu arasında ayrım yapabilirsiniz. Bu özellik yalnızca üç dize girişinden birini alabilir: "fare", "kalem" veya "dokunma". İşte nasıl kullanılacağına dair basit bir örnek işaretçi türü mülk:

functionhandlePointerEvent(event){
// Using the pointerType property
switch (event.pointerType) {
case'mouse':
// Handle the situation where the pointing device is a mouse
console.log(`Mouse Pointer ID: ${event.pointerId}`);
break;
case'pen':
// Handle the situation where the pointing device is a stylus
console.log(`Stylus Pointer ID: ${event.pointerId}`);
break;
case'touch':
// Handle the situation where the pointing device is a finger touch
console.log(`Touch Pointer ID: ${event.pointerId}`);
break;
default:
// Handle other pointer types or cases
console.log(`pointerType ${event.pointerType} is not supported`);
break;
 }
}
// Attach pointer events to elements
element.addEventListener('pointerdown', handlePointerEvent);

Genişlik ve Yükseklik Özellikleri

Bu özellikler, işaretçinin temas alanının genişliğini ve yüksekliğini milimetre cinsinden temsil eder. Bazı tarayıcılar bunları desteklemez ve bu tür tarayıcılarda değerleri her zaman 1 olacaktır.

Bu özelliklerin iyi bir kullanım durumu, hassas girdi gerektiren veya farklı girdilerin boyutları arasında ayrım yapılması gereken uygulamalar olacaktır. Örneğin, bir çizim uygulamasında daha büyük yükseklik ve genişlik, kullanıcının daha geniş bir konturla çizim yaptığı anlamına gelebilir ve bunun tersi de geçerlidir.

Çoğu zaman, dokunma etkinlikleri için muhtemelen genişlik ve yükseklik özelliklerini kullanacaksınız.

Daha Fazla Kapsayıcılık için İşaretçi Olaylarını Kullanın

İşaretçi olayları, çok fazla stres yaşamadan çok çeşitli aygıtlara ve giriş türlerine hizmet vermenizi sağlar. Modern standartlara uyum sağlamak ve daha iyi bir web oluşturmaya yardımcı olmak için bunları uygulamalarınızda her zaman kullanmalısınız.