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만 포함합니다. 향후 사용자 시스템의 모든 입력 장치에 대해 더 자세히 이해할 수 있도록 확장될 예정입니다. 사용 사례에 관한 의견을 보내주세요.