Pointer hodisalari

Pointer hodisalari (Pointer Events) — sichqoncha, sensorli ekran va qalam (stylus) kabi turli ko'rsatuvchi qurilmalar bilan ishlashning zamonaviy va yagona usuli. Ular sichqoncha hodisalarining o'rnini bosishga mo'ljallangan va bugungi kunda barcha zamonaviy brauzerlarda qo'llab-quvvatlanadi.

Qisqacha tarix

Uzoq vaqt faqat sichqoncha hodisalari mavjud edi. Keyin sensorli qurilmalar (telefon, planshet) tarqaldi va ular uchun touchstart, touchmove, touchend kabi Touch Events paydo bo'ldi. Muammo shundaki, dasturchilarga bir vaqtda ikki xil (sichqoncha va sensor) API'ni qo'llab-quvvatlashga to'g'ri kelardi — bu ko'p takroriy kod demakdir.

Buni hal qilish uchun Pointer Events standarti yaratildi. U barcha turdagi ko'rsatuvchi qurilmalarni bitta yagona API ostida birlashtiradi. Bugun eng so'nggi versiya — Pointer Events Level 2 — barcha asosiy brauzerlarda ishlaydi.

Pointer hodisalari turlari

Pointer hodisalarining nomlari sichqoncha hodisalariga o'xshaydi — faqat mouse o'rniga pointer:

• pointerdown — sichqonchaning mousedowniga o'xshash.
• pointerup — mouseupga o'xshash.
• pointermove — mousemovega o'xshash.
• pointerover / pointerout — mouseover/mouseoutga o'xshash.
• pointerenter / pointerleave — mouseenter/mouseleavega o'xshash.
• pointercancel — ko'rsatish uzilganda (masalan, tizim harakatni o'z zimmasiga olganda).
• gotpointercapture / lostpointercapture — pointer ushlash (capture) olinganda/yo'qolganda.

pointerType: qurilma turini aniqlash

Pointer hodisalari sichqoncha hodisalarining barcha xossalarini (clientX/Y, target, button va h.k.) meros qilib oladi. Bundan tashqari o'ziga xos yangi xossalar bor. Eng foydalisi — pointerType. U qaysi turdagi qurilma hodisani chaqirganini bildiradi:

• 'mouse' — sichqoncha.
• 'pen' — qalam (stylus).
• 'touch' — barmoq (sensorli ekran).

elem.onpointerdown = function(event) {
  if (event.pointerType === 'touch') {
    // Barmoq bilan bosildi
  } else if (event.pointerType === 'pen') {
    // Qalam bilan
  } else {
    // Sichqoncha bilan
  }
};

Bu bizga qurilma turiga qarab turlicha xatti-harakat qilish imkonini beradi — bir xil kod ichida, ikkita alohida API'siz.

pointerId: bir nechta barmoqni ajratish

Har bir ko'rsatuvchining o'ziga xos identifikatori bor — pointerId. Sichqoncha bilan ishlaganda bu odatda muhim emas (bitta kursor). Lekin sensorli ekranlarda ko'p barmoqli (multi-touch) harakatlar bo'lishi mumkin — masalan, ikki barmoq bilan kattalashtirish (pinch-zoom).

Har bir barmoqqa alohida pointerId beriladi. Shu tufayli bir vaqtning o'zida bir nechta ko'rsatuvchini alohida-alohida kuzatish mumkin:

elem.onpointerdown = function(event) {
  console.log('Yangi pointer, ID: ' + event.pointerId);
  // Har bir barmoq uchun turli pointerId keladi
};

isPrimary xossasi

Bir nechta ko'rsatuvchi bir vaqtda bo'lsa (masalan, bir nechta barmoq), event.isPrimary xossasi "birlamchi" (asosiy) ko'rsatuvchi uchun true qaytaradi — bu odatda birinchi tegilgan barmoq. Bu bilan asosiy harakatni ikkilamchilaridan ajratish mumkin.

setPointerCapture: pointer'ni ushlab qolish

Pointer Events'ning kuchli imkoniyatlaridan biri — elem.setPointerCapture(pointerId) metodi. U berilgan pointerIdga tegishli barcha kelgusi hodisalarni shu elemga "biriktirib qo'yadi" (bind qiladi).

Ya'ni setPointerCapture chaqirilgandan so'ng, ko'rsatuvchi qayerda bo'lishidan qat'i nazar (hatto element chegarasidan tashqariga chiqsa ham), barcha pointer hodisalari maqsad qilingan elementga yo'naltiriladi — event.target har doim o'sha element bo'ladi.

// Slayder (slider) yasashda foydali:
slider.onpointerdown = function(event) {
  // Endi bu pointer'ning barcha hodisalari slider'ga keladi,
  // kursor slider tashqarisiga chiqib ketsa ham.
  slider.setPointerCapture(event.pointerId);
};

slider.onpointermove = function(event) {
  // Slayder tashqarisida ham ishlaydi!
};

gotpointercapture va lostpointercapture

Capture olingan va yo'qolgan paytlarni kuzatish uchun ikki hodisa bor: gotpointercapture (element pointer'ni ushlaganda) va lostpointercapture (ushlash tugaganda). Odatda ular kamdan-kam kerak bo'ladi, lekin murakkab holatlarni to'g'ri boshqarishda yordam beradi.

Xulosa

• Pointer Events sichqoncha, sensor va qalam hodisalarini bitta API'da birlashtiradi — kod barcha qurilmalarda ishlaydi.
• mouse... nomlarini pointer...ga almashtirishning o'zi ko'pincha kifoya.
• pointerType qurilma turini (mouse/pen/touch) bildiradi.
• pointerId har bir ko'rsatuvchini alohida ajratadi — ko'p barmoqli interfeyslar uchun zarur.
• setPointerCapture pointer hodisalarini elementga biriktiradi — slayder va sudrash uchun juda qulay.

Zamonaviy loyihalarda interaktivlik uchun Touch Events yoki alohida sichqoncha hodisalari o'rniga Pointer Events'dan foydalanish tavsiya etiladi.