자바스크립트 "Pointer Events API"

JavaScript Pointer Events API는 마우스, 터치 및 펜 이벤트와 같은 입력 이벤트를 처리하는 방법을 제공하는 브라우저 API입니다. 이 API를 사용하면 단일 이벤트 리스너로 모든 포인터 이벤트를 처리할 수 있습니다. Pointer Events API에는 풍부한 대화형 웹 애플리케이션을 만드는 데 도움이 되는 여러 가지 유용한 기능이 있습니다. 다음은 Pointer Events API를 사용하는 방법에 대한 몇 가지 예입니다.

​

예제 1: 포인터 이벤트 처리

​

const element = document.getElementById('my-element');

element.addEventListener('pointerdown', (event) => {

console.log('Pointer down', event.pointerType);

});

element.addEventListener('pointerup', (event) => {

console.log('Pointer up', event.pointerType);

});

​

이 예제에서는 pointerdown 및 pointerup 이벤트에 대한 HTML 요소에 이벤트 리스너를 추가합니다. 이벤트 리스너 함수에 전달된 이벤트 객체에는 포인터 유형(마우스, 터치 또는 펜)을 포함하여 포인터 이벤트에 대한 정보가 포함됩니다.

​

예 2: 호버에서 커서 변경

​

const element = document.getElementById('my-element');

element.style.cursor = 'pointer';

element.addEventListener('pointerenter', () => {

element.style.cursor = 'grab';

});

element.addEventListener('pointerleave', () => {

element.style.cursor = 'pointer';

});

​

이 예제에서는 포인터가 요소에 들어오고 나갈 때 HTML 요소의 커서를 변경합니다. 포인터가 요소에 들어가면 커서가 "잡기"로 바뀌고, 떠나면 다시 "포인터"로 바뀝니다.

​

예 3: 이미지에서 핀치 확대/축소

​

<img src="image.jpg" id="my-image">

​

const image = document.getElementById('my-image');

let initialDistance = 0;

let initialScale = 1;

image.addEventListener('pointerdown', (event) => {

if (event.pointerType === 'touch' && event.touches.length === 2) {

initialDistance = distance(event.touches);

initialScale = parseFloat(image.style.transform.match(/scale\(([0-9\.]+)\)/)[1] || 1);

}

});

image.addEventListener('pointermove', (event) => {

if (event.pointerType === 'touch' && event.touches.length === 2) {

const currentDistance = distance(event.touches);

const scale = initialScale * currentDistance / initialDistance;

image.style.transform = `scale(${scale})`;

}

});

​

function distance(touches) {

const touch1 = touches[0];

const touch2 = touches[1];

const dx = touch1.clientX - touch2.clientX;

const dy = touch1.clientY - touch2.clientY;

return Math.sqrt(dx * dx + dy * dy);

}

​

이 예에서는 핀치 확대/축소 기능을 이미지에 추가합니다. 사용자가 두 손가락으로 이미지를 터치하면 손가락 사이의 초기 거리와 이미지의 초기 스케일이 저장됩니다. 손가락이 움직이면 손가락 사이의 거리가 측정되고 이에 따라 CSS 변환을 사용하여 이미지 크기가 조정됩니다.

​

전반적으로 Pointer Events API는 웹 애플리케이션에서 포인터 입력을 처리하는 강력하고 유연한 방법을 제공합니다.