입력 장치 기능

Chrome 47에는 사용자가 사이트와 상호작용하는 방식을 더 쉽게 이해할 수 있는 새로운 기능 InputDeviceCapabilities가 추가되었습니다. 잠시 뒤로 물러서서 이것이 중요한 이유를 알아보겠습니다.

DOM 입력 이벤트는 실제 기기 입력 (예: click 이벤트는 마우스, 터치스크린 또는 키보드로 실행될 수 있습니다. 하지만 한 가지 문제가 있습니다. 이벤트를 담당하는 실제 기기의 세부정보를 가져오는 간단한 방법은 없습니다.

또한 특정 유형의 입력은 호환성을 이유로 '가짜' DOM 입력 이벤트를 추가로 생성할 수 있습니다. 이러한 모조 DOM 이벤트 중 하나는 사용자가 휴대전화에서 터치스크린을 탭할 때 발생합니다. 터치 이벤트를 실행할 뿐만 아니라 호환성을 위해 마우스 이벤트도 실행합니다.

이는 마우스와 터치 입력을 모두 지원할 때 개발자에게 문제가 됩니다. mousedown 이벤트가 실제로 마우스의 새 입력을 나타내는지 아니면 이전에 처리된 touchstart 이벤트의 호환성 이벤트인지를 파악하기 어렵습니다.

새로운 InputDeviceCapabilities API는 UIEvent의 sourceCapabilities 객체를 통해 입력 이벤트의 기본 소스에 관한 세부정보를 제공합니다.
객체에는 사용자 작업에 의해 이벤트가 생성된 방식에 따라 true 또는 false로 설정되는 firesTouchEvents 속성이 있습니다.

문제는 이것을 어디에 사용해야 할까요?

포인터 이벤트 외에도, 오늘날 많은 개발자는 터치 레이어에서의 상호작용 로직을 처리하므로 Default가 애초에 '가짜' 마우스 이벤트 생성을 피하도록 합니다.이 디자인은 많은 시나리오에서 잘 작동하며 InputDeviceCapabilities를 활용하기 위해 변경할 필요가 없습니다.

하지만 어떤 시나리오에서는 터치 이벤트를 예방할 수 없도록 해야 합니다. 예를 들어 계속 탭하여 '클릭' 이벤트를 전송하고 포커스를 변경하려고 합니다. 이러한 경우 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를 Polyfilled로 작성했으므로 대부분의 플랫폼에서 사용할 수 있습니다.

현재 이 API는 최소한의 수준으로, 터치 이벤트에서 파생된 마우스 이벤트를 식별하는 특정 문제를 해결하는 데 중점을 두고 있습니다. InputDeviceCapabilities 인스턴스도 인스턴스화할 수 있습니다. 하지만 이 인스턴스에는 firesTouchEvents만 포함됩니다. 향후 사용자 시스템의 모든 입력 장치를 더 자세히 이해할 수 있도록 확장될 예정입니다. 사용 사례에 관한 의견을 보내주세요.