> 웹 프론트엔드 > JS 튜토리얼 > JavaScript 이벤트 학습 10장 일부 대체 가능한 이벤트 쌍_Javascript 기술

JavaScript 이벤트 학습 10장 일부 대체 가능한 이벤트 쌍_Javascript 기술

WBOY
풀어 주다: 2016-05-16 18:34:45
원래의
895명이 탐색했습니다.
테스트의 한계
이 장에서는 마우스 이벤트를 시뮬레이션하는 데 사용할 수 있는 이벤트를 알아볼 계획입니다. 이 일련의 테스트에는 화면 판독기가 포함되지 않습니다. 테스트 역시 모든 기준을 충족하지 못해 한계가 있었습니다. 이 테스트는 그래픽 브라우저에서 마우스를 사용하지 않는 사용자만을 대상으로 합니다.
이 테스트는 일부 모바일 장치에서도 사용할 수 있다고 가정합니다. 조건이 부족해서 테스트할 수 없습니다. 모바일 장치의 성능은 항상 만족스럽지 못한 경우가 많습니다.
요약
안타깝게도 마우스가 아닌 이벤트와 마우스가 아닌 이벤트 사이에는 많은 차이가 있기 때문에 마우스 이벤트와 마우스가 아닌 이벤트에 대해 엄격한 일대일 솔루션을 만들 수 없습니다. 따라서 아래 조언은 대부분의 상황에 적용되지만 전부는 아닙니다.
다음은 테스트 결과입니다.
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
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿