JavaScript 이벤트 학습 7장 이벤트 속성_Javascript 기술

Event에 대한 일부 정보를 읽으려고 할 때 우리는 종종 많은 수의 속성에 파묻히게 되는데, 그 중 대부분은 대부분의 브라우저에서 제대로 실행되지 않습니다. 이벤트 호환성 목록은 다음과 같습니다.
이러한 속성 목록은 작성하지 않겠습니다. 이러한 상황은 너무 혼란스럽고 학습에 전혀 도움이 되지 않기 때문입니다. 5개의 코드를 작성하기 전에 브라우저에 대해 5가지 질문을 하고 싶습니다.
1. 이벤트 종류는 무엇인가요?
2. 이벤트의 대상이 되는 HTML 요소는 무엇인가요?
3. 이벤트가 발생했을 때 어떤 키가 눌렸나요?
4. 이벤트가 발생했을 때 어떤 마우스 버튼이 눌렸나요?
5. 이벤트 발생 시 마우스 위치는 어디인가요?
마지막 질문에 대해 아주 자세하게 답변해 드렸습니다.
저는 이 코드에 대해 매우 엄격한 개체 검사를 수행했습니다. 먼저 이벤트에 대한 브라우저 간 액세스를 만든 다음 각 속성을 사용하기 전에 브라우저 지원을 확인했습니다.

1. 이벤트의 종류는 무엇인가요?
표준 답변이 포함된 브라우저 간 질문입니다. 속성을 보려면 type 속성을 사용하세요.

코드 복사 코드는 다음과 같습니다.

function doSomething(e) {
if (!e) var e = window.event
alert(e.type); 🎜> }

2. 이벤트 대상 HTML 요소는 무엇인가요?
W3C/Netscape의 말: 목표. 아니요, Microsoft에서는 srcElement라고 말했습니다. 두 속성 모두 이벤트가 발생했을 때 HTML 요소를 반환합니다.

코드 복사 코드는 다음과 같습니다.

function doSomething(e) {
var targ;
if (!e) var e = window.event;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement; 🎜>if (targ.nodeType == 3) // Safari 버그 퇴치
targ = targ.parentNode
}

코드의 마지막 두 줄은 원정 여행. 텍스트가 포함된 요소에서 이벤트가 발생하면 요소 자체가 아닌 텍스트 노드가 이벤트의 대상이 됩니다. 따라서 대상의 노드 유형이 3(텍스트 노드)인지 확인하고 싶습니다. 그렇다면 이를 상위 노드인 HTML 요소로 이동합니다.
이벤트가 캡처되거나 버블링(bubbles up)되더라도 target/srcElement 속성은 여전히 ​​이벤트가 가장 먼저 발생한 요소입니다.
기타 타겟
타겟팅 속성은 다양합니다. Event Order 기사에서 currentTarget에 대해 논의했고 마우스 이벤트 기사에서 관련Target, fromElement 및 toElement에 대해 논의했습니다.


3. 이벤트 발생 시 어떤 키가 눌렸나요?
이 질문은 비교적 간단합니다. 먼저 keyCode 속성에서 키 코드(a=65)를 가져옵니다. 키 값을 얻은 후 필요한 경우 String.fromCharCode() 메서드를 통해 실제 키 값을 알 수 있습니다.

코드 복사 코드는 다음과 같습니다.

function doSomething(e) {

var code;
if (!e) var e = window.event;
if (e.keyCode) 코드 = e.keyCode
else if (e.which) 코드
var 문자 = String.fromCharCode(code);
alert('문자는 ' 문자였습니다)



여기에는 키보드 이벤트를 사용하기 어렵게 만드는 곳이 있습니다. 예를 들어, 사용자가 키를 누르는 동안 kepress 이벤트가 발생합니다. 그러나 대부분의 브라우저에서 키를 누르는 시간은 누르는 시간만큼 깁니다. 그게 좋은 생각인지는 잘 모르겠지만, 그게 바로 그거예요.


4. 이벤트 발생 시 어떤 마우스 버튼이 눌렸나요?
여기에는 어떤 마우스 버튼이 눌렸는지 알 수 있는 두 가지 속성, which와 버튼이 있습니다. 이러한 속성은 일반적으로 클릭 시 반드시 작동하지는 않습니다. 어떤 마우스 버튼이 눌렸는지 안전하게 감지하려면 mousedown 및 mouseup 이벤트를 사용하는 것이 좋습니다.
오래된 Netscape 자산입니다. 마우스 왼쪽 버튼의 값은 1, 가운데 버튼(스크롤 휠)의 값은 2, 마우스 오른쪽 버튼의 값은 3입니다. 지원이 약한 것 외에는 문제가 없습니다. 실제로 마우스 버튼을 감지하는 데 자주 사용됩니다.
이제 버튼 속성이 잘 인식됩니다. W3C의 표준 값은 다음과 같습니다.
왼쪽 버튼 0
가운데 버튼 1
오른쪽 버튼 2
Microsoft의 표준 값은 다음과 같습니다.
왼쪽 버튼 1
가운데 버튼 4
오른쪽 버튼 2
Microsoft의 표준이 W3C의 표준보다 낫다는 것은 의심의 여지가 없습니다. 0은 아무 키도 누르지 않았으며 그 밖의 모든 것은 비합리적임을 의미할 수 있습니다.
또한 Microsoft 모델에서만 버튼의 값을 조합할 수 있습니다. 예를 들어 5는 "왼쪽 버튼과 가운데 버튼"을 함께 누르는 것을 의미합니다. IE6은 병합을 지원하지 않을 뿐만 아니라 w3c 모델은 이론적으로 불가능합니다. 왼쪽 버튼을 눌렀는지 알 수 없습니다.
그래서 내 생각에는 w3c가 버튼을 정의하는 데 심각한 실수를 저질렀다고 생각합니다.

오른쪽 클릭
다행히도 일반적으로 오른쪽 버튼이 클릭되었는지 알고 싶어합니다. W3C와 Microsoft는 이 문제에 대해 버튼 값을 2로 정의했기 때문에 여전히 오른쪽 클릭을 감지할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

function doSomething(e) {
var rightclick;
if (!e) var e = window.event;
if (e.which) rightclick = (e.which == 3)
else if (e.button) rightclick = (e. 버튼 == 2);
alert('Rightclick: ' rightclick); // true 또는 false
}

Mac에서는 일반적으로 버튼이 하나 있으면 Mozilla는 Ctrl-클릭 버튼의 값을 2로 정의하므로 Ctrl-클릭도 메뉴를 엽니다. ICab은 아직 마우스 버튼 속성을 지원하지 않으므로 Opera에서는 오른쪽 클릭을 감지할 수 없습니다.
5. 이벤트 발생 시 마우스 위치는 어디인가요?
마우스 위치 문제가 상당히 심각합니다. 마우스 좌표에 대한 속성은 6개 이상이지만 마우스 좌표를 찾는 신뢰할 수 있는 브라우저 간 방법은 아직 없습니다.
다음은 6개의 좌표 세트입니다:
1. clientX, clientY
3. offsetX, offsetY
4. , screenY
6. x, y
여기서 pageX/Y와 clientX/Y의 문제를 설명한 적이 있습니다.
screenX와 screenY는 브라우저 간 호환이 가능한 유일한 속성 쌍입니다. 이는 전체 컴퓨터 화면에 걸쳐 마우스의 좌표를 제공합니다. 불행하게도 이 정보만으로는 충분하지 않습니다. 화면에서 마우스가 어디에 있는지 알 필요가 없습니다. 아마도 현재 마우스 위치에 새 창을 배치하고 싶을 수도 있습니다.
다른 세 쌍의 속성은 중요하지 않습니다. 여기에서 설명을 참조하세요.
올바른 코드
다음 코드는 마우스 좌표를 정확하게 감지할 수 있습니다

코드 복사 코드는 다음과 같습니다. 다음:

function doSomething(e) {

var posx = 0
var posy = 0
if (!e) var e = window.event; >if (e .pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX document.body.scrollLeft
document.documentElement.scrollLeft;
posy = e.clientY document.body.scrollTop
document.documentElement.scrollTop
}
// posx 및 posy에는 문서를 기준으로 한 마우스 위치가 포함됩니다.
// 이 정보로 작업 수행
}



원본 텍스트: http://www .quirksmode.org /js/events_properties.html

제 트위터 @rehawk에서 조언을 부탁드립니다.