Chrome 47에는 사용자가 사이트와 상호작용하는 방식을 더 쉽게 파악할 수 있는 새로운 기능인 InputDeviceCapabilities가 있습니다. 잠시 뒤로 돌아가서 이 기능이 중요한 이유를 알아보겠습니다.
DOM 입력 이벤트는 하위 수준 입력 이벤트 위에 있는 추상화이며, 물리적 기기 입력 (예: click 이벤트는 마우스, 터치 스크린 또는 키보드로 실행할 수 있습니다. 하지만 문제가 있습니다. 이벤트를 일으킨 실제 기기의 세부정보를 가져오는 간단한 방법이 없습니다.
또한 특정 유형의 입력은 호환성 문제로 인해 추가 '가짜' DOM 입력 이벤트를 생성할 수 있습니다. 이러한 가짜 DOM 이벤트 중 하나는 사용자가 터치 스크린 (예: 휴대전화)을 탭할 때 발생합니다. 이 이벤트는 터치 이벤트뿐만 아니라 호환성상의 이유로 마우스 이벤트도 실행합니다.
이로 인해 개발자가 마우스와 터치 입력을 모두 지원할 때 문제가 발생합니다. mousedown 이벤트가 실제로 마우스의 새 입력을 나타내는지 아니면 이전에 처리된 touchstart 이벤트의 호환성 이벤트인지 알기는 어렵습니다.
새 InputDeviceCapabilities API는 UIEvent의 sourceCapabilities 객체를 통해 입력 이벤트의 기본 소스에 관한 세부정보를 제공합니다.
객체에는 사용자 작업에 의해 이벤트가 생성된 방식에 따라 true 또는 false로 설정된 firesTouchEvents 속성이 있습니다.
문제는 이 기능을 어디에 사용해야 하는지입니다.
오늘날 많은 개발자는 포인터 이벤트 외에도 터치 영역에서 상호작용 로직을 처리하여 기본값이 처음부터 '가짜' 마우스 이벤트를 만들지 않도록 합니다.이 디자인은 여러 시나리오에서 잘 작동하며 InputDeviceCapabilities를 활용하기 위해 변경할 필요가 없습니다.
하지만 경우에 따라 터치 이벤트의 preventDefault를 실행하고 싶지 않을 수 있습니다. 예를 들어 탭이 여전히 '클릭' 이벤트를 전송하고 포커스를 변경하도록 하려는 경우입니다. 이러한 경우 MouseEvent.sourceCapabilities.firesTouchEvents 속성에 저장된 정보를 사용하여 터치 및 마우스 기반 이벤트의 로직을 포인터 이벤트로 로직을 관리하는 방식과 유사한 모델로 통합할 수 있습니다. 즉, 상호작용 로직을 관리하고 개발자가 포인터 이벤트를 지원하는 브라우저와 지원하지 않는 브라우저 간에 로직을 더 간단하게 공유할 수 있는 코드 세트를 하나만 보유할 수 있습니다.
function addMouseEventListener(target, type, handler, capture) {
target.addEventListener(type, function(e) {
if (e.sourceCapabilities.firesTouchEvents)
return false;
return handler(e);
}, capture);
}
다행히도 Rick Byers가 다양하게 채워 주었으므로 대부분의 플랫폼에서 사용할 수 있습니다.
현재 이 API는 터치 이벤트에서 파생된 마우스 이벤트를 식별하는 특정 문제를 해결하는 데 중점을 두고 최소한으로 제공됩니다.
InputDeviceCapabilities의 인스턴스를 만들 수도 있지만 firesTouchEvents만 포함됩니다. 향후 사용자 시스템의 모든 입력 장치에 관해 더 자세히 이해할 수 있도록 확장될 예정입니다. 사용 사례에 관한 의견을 보내주세요.