테스트의 한계 이 장에서는 마우스 이벤트를 시뮬레이션하는 데 사용할 수 있는 이벤트를 알아볼 계획입니다. 이 일련의 테스트에는 화면 판독기가 포함되지 않습니다. 테스트 역시 모든 기준을 충족하지 못해 한계가 있었습니다. 이 테스트는 그래픽 브라우저에서 마우스를 사용하지 않는 사용자만을 대상으로 합니다.
이 테스트는 일부 모바일 장치에서도 사용할 수 있다고 가정합니다. 조건이 부족해서 테스트할 수 없습니다. 모바일 장치의 성능은 항상 만족스럽지 못한 경우가 많습니다.
요약
안타깝게도 마우스가 아닌 이벤트와 마우스가 아닌 이벤트 사이에는 많은 차이가 있기 때문에 마우스 이벤트와 마우스가 아닌 이벤트에 대해 엄격한 일대일 솔루션을 만들 수 없습니다. 따라서 아래 조언은 대부분의 상황에 적용되지만 전부는 아닙니다.
다음은 테스트 결과입니다.
1. mouseover:focus
2. mouseout:blur
3. 클릭: 일치가 필요하지 않습니다.
dblclick: 모르겠습니다. 5. mousedown:keydown(가장 나쁜 선택)
6. mouseup:keyup(가장 나쁜 선택)
7. mousemove: 마우스 없이는 불가능
페이지에서 완벽한 지원이 필요한 경우 사용자라면 이벤트 핸들러를 적용할 수 있는 요소가 거의 없습니다. 이는 실제로 이벤트 핸들러가 링크와 양식에서만 유용했던 Netscape 3 시절로의 회귀입니다.
아직 더 많은 연구가 필요합니다.
준비
대부분의 브라우저에서 사용자는 전체 페이지를 탭으로 이동할 수 있습니다. 이렇게 하면 초점이 다음 링크나 양식으로 이동합니다. 이는 IE와 Mozilla 모두에서 작동합니다. Safari에서는 키보드 단축키를 활성화하려면 F1을 눌러야 합니다.
Opera 사용자는 다른 시스템에 있습니다. 링크 위로 이동하려면 Ctrl 화살표 키를 눌러야 합니다. 비록 다른 조합이지만 저는 여전히 '태빙'이라고 부르고 싶습니다.
예: 기존 마우스오버
어떻게 하나요? 가장 중요한 것은 mouseover 및 mouseout에 대한 두 가지 이벤트를 추가하는 것입니다.
imgs[i].onmouseover = imgs[i].onfocus = mouseGoesOver;
imgs[i].onmouseout = imgs[i].onblur = mouseGoesOut; 🎜>
이제 사용자가 마우스를 패스하거나 탭을 패스하면 해당 기능이 실행됩니다.
그러나 몇 가지 이벤트를 추가하는 것만으로는 충분하지 않습니다. 내 원래 스튜디오는 이미지에 직접 onmouseover 및 mouseout을 설정합니다. 불행하게도 이미지를 탭하는 것은 거의 불가능합니다. 탭은 링크와 양식에만 유용합니다. 따라서 이미지의 상위 노드인 link에 이벤트를 추가해야 합니다.
이 간단한 예는 재등록으로 인해 변경되지 않지만 더 복잡한 스크립트는 예를 들어 div에 대한 액세스 활동을 정의하지 못할 수도 있습니다.
완벽한 사용성을 보장하기 위해 1998년에 했던 것처럼 링크와 양식에 대한 이벤트를 정의하면 됩니다. 인터넷의 대부분의 이벤트는 여전히 링크에 정의되어 있지만 텍스트 편집과 같은 복잡한 스크립트는 클릭해야 하기 때문에 마우스가 아닌 사용자는 사용할 수 없습니다.
번역 주소: http://www.quirksmode.org/js/events_pairs.html
저자: Beiyu(tw:@rehawk)
글 출처: beiyu.cnblogs.com