JavaScript 고급 프로그래밍 이벤트 연구 노트_Javascript 기술

12장 이벤트
1. 이벤트 흐름
1.1 이벤트 버블링(IE 이벤트 흐름)
□이벤트 버블링(이벤트 버블링), 즉 문서 내에서 가장 구체적인 요소부터 이벤트가 시작됩니다. 가장 깊은 중첩 수준을 가진 노드)는 이를 수락한 다음 덜 구체적인 노드(문서)까지 전파합니다.
□모든 브라우저는 이벤트 버블링을 지원합니다. Firefox, Chrome 및 Safari 버블 이벤트는 창 개체까지 전달됩니다.
1.2 이벤트 캡처(넷스케이프 이벤트 스트리밍)
□ 덜 특정 노드는 이벤트를 더 먼저 수신하고 특정 노드는 마지막으로 이벤트를 수신합니다.
□Safari, chrome, Opera, Firefox를 지원하지만 캡처는 window 객체부터 시작됩니다(DOM2 레벨 사양은 문서에서 시작됩니다).
1.3DOM 이벤트 흐름
□ "DOM2 수준 이벤트"에서 지정하는 이벤트 흐름은 이벤트 캡처 단계, 대상 단계, 이벤트 버블링 단계의 세 단계로 구성됩니다.
□DOM2: 캡처 단계에는 실제 대상이 포함되지 않으며 이벤트 대상도 포함되지 않으며 이벤트를 가로챌 기회만 제공됩니다.
□Safari, chrome, Firefox 및 Opera9.5 이상에서는 캡처 단계 중에 이벤트 개체에 대한 이벤트를 트리거합니다. 결과적으로 대상에서 이벤트를 운영할 수 있는 두 가지 기회가 있습니다.
□IE는 DOM 이벤트 스트리밍을 지원하지 않습니다. 기타 지원.
2. 이벤트 핸들러(또는 이벤트 리스너)
정의: 이벤트에 응답하는 함수입니다.
2.1 HTML 이벤트 핸들러
□ 요소가 지원하는 각 이벤트는 해당 이벤트 핸들러와 동일한 이름을 가진 HTML 속성을 사용하여 지정할 수 있습니다.
□함수 코드 문자는 HTML 이스케이프 처리되어야 합니다.
□ 문제:
◇시차 문제: 이벤트가 발생했을 때 이벤트 핸들러에 아직 실행 조건이 없을 수 있습니다. 오류가 발생하지 않도록 try-catch 블록 캡슐화를 사용하세요.

◇HTML과 JavaScript 코드는 밀접하게 결합되어 있습니다.
2.2 DOM 레벨 0 이벤트 핸들러
□DOM 레벨 0 이벤트 핸들러: 이벤트 핸들러 속성에 함수를 할당합니다. 장점: 간단하고 크로스 브라우저입니다.
□ 이 이벤트 핸들러 메서드는 코드가 실행될 때까지 이벤트를 바인딩하지 않습니다.
□ DOM 레벨 0 메서드를 사용하여 지정된 이벤트 핸들러는 요소의 메서드로 간주됩니다. 이벤트 핸들러는 요소 범위 내에서 실행됩니다. 프로그램의 this는 현재 요소를 나타냅니다.
□DOM0 레벨 이벤트 삭제: btn.onclick = null; //이벤트 핸들러 삭제
2.3 DOM2 레벨 이벤트 핸들러
□addEventListener() 및 RemoveEventListener(). 3개의 매개변수(처리할 이벤트 이름, 이벤트 핸들러로서의 함수, 부울 값)를 허용합니다.
◇마지막 부울 값이 true이면 캡처 단계에서 이벤트 핸들러가 호출된다는 의미이고, false이면 버블링 단계에서 이벤트 핸들러가 호출된다는 의미입니다.
Var btn = document.getElementById("myBtn");
Btn.addEventListener("click",function(){alert(this.id);},false)
□ DOM 레벨 2 사용 방법 이벤트 핸들러 추가의 주요 이점은 여러 이벤트 핸들러를 추가할 수 있다는 것입니다. 추가된 순서대로 실행됩니다.
□addEventListener()를 통해 추가된 이벤트 핸들러는 RemoveEventListener()를 통해서만 제거할 수 있습니다. 제거 시 전달된 매개변수는 핸들러 추가 시 사용된 매개변수와 동일합니다. 즉, 익명 함수는 제거할 수 없습니다.
□호환성을 최대화하려면 버블링 단계에 이벤트 핸들러를 추가하세요.
□Firefox, Safari, Chrome 및 Opera는 DOM2 수준 이벤트 핸들러를 지원합니다. IE는 이를 지원하지 않으며 자체 이벤트 핸들러를 가지고 있습니다.
2.4 IE 이벤트 핸들러.
□ IE의 DOM2와 유사한 메서드: attachmentEvent() 및 detachEvent(). 두 메소드 모두 이벤트 핸들러 이름과 이벤트 핸들러 함수라는 동일한 두 매개변수를 허용합니다.
□IE는 버블링만 지원하며, AttachEvent()를 통해 추가된 이벤트 핸들러가 버블링 단계에 추가됩니다.
attachEvent()의 이벤트 처리 함수는 전역 범위에서 실행되므로 window와 동일합니다.
□attachEvent()는 역순으로 트리거할 요소에 여러 핸들러를 추가할 수도 있습니다.
□attachEvent() 이벤트는 detachEvent()를 통해 제거할 수 있지만 익명 함수는 제거할 수 없습니다.
2.5 크로스 브라우저 이벤트 핸들러
var EventUtil = {
addHandler : function(element, type, handler){
if(element.addEventListener){
element.addEventListener(type ,handler ,false);
}else if(element.attachEvent){
element.attachEvent("on" 유형, 핸들러)
}else{
elmenet["on" 유형] = 핸들러;
}
],
removeHandler : function(element, type, handler){
if(element.removeEventListener){
element.removeEventListener(type, handler, false); }else if(element.detachEvent){
element.detachEvent("on" 유형, 핸들러);
}else{
element["on" 유형] =
}
}
};
□이 호환성 기능은 IE의 범위 문제 등 브라우저의 모든 문제를 고려하지 않습니다.
3. 이벤트 객체
정의: DOM에서 이벤트가 발생하면 이벤트 객체가 생성됩니다. 이 객체에는 이벤트와 관련된 모든 정보가 포함됩니다.
3.1 DOM의 이벤트 객체
① DOM 호환 브라우저는 이벤트 객체를 이벤트 핸들러(DOM 레벨 0 또는 DOM 레벨 2)에 전달합니다. HTML 속성을 통해 지정되면 이벤트 변수는 이벤트 객체를 보유합니다.
②모든 이벤트 객체에는 다음과 같은 속성/메서드가 포함됩니다. P291
□bubbles: 이벤트 버블 여부를 나타냅니다. bool.
□cancelable: 이벤트의 기본 동작을 취소할 수 있는지 여부를 나타냅니다(bool).
□currentTarget: 이벤트 핸들러가 현재 이벤트를 처리하고 있는 요소입니다.
□세부사항: 행사와 관련된 세부사항입니다.
□eventPhase: 이벤트 핸들러가 호출되는 단계: 1. 캡처 2. 대상에서 3. 버블링.
□preventDefault(): 이벤트 기본 동작을 취소합니다.
□stopPropagation(): 추가 이벤트 캡처 또는 버블링을 취소합니다.
□target : 이벤트의 대상입니다.
□type: 트리거되는 이벤트의 유형입니다.
□view: 이벤트와 관련된 추상적인 뷰입니다.
③이벤트 핸들러 내부:
□ 객체 this는 항상 currentTarget의 값과 동일합니다. 즉, this와 currentTarget은 모두 이벤트 프로그램에 바인딩된 요소를 가리킵니다.
□target에는 이벤트의 실제 대상, 즉 이벤트를 트리거한 요소만 포함됩니다.
④event.preventDefault(): 특정 이벤트의 기본 동작을 취소할 수 있습니다.
⑤event.stopPropagation(): DOM에서 이벤트 전파를 즉시 중지합니다.
⑥ eventPhase 속성을 사용하여 이벤트가 현재 이벤트 흐름의 어느 단계에 있는지 확인합니다.
3.2 IE의 이벤트 객체
①IE에서 이벤트 객체에 접근하는 방법은 지정된 이벤트 핸들러 방식에 따라 다릅니다.
□DOM0 레벨 메소드를 사용하여 이벤트 핸들러를 추가하는 경우 이벤트 객체가 윈도우 객체의 속성으로 존재합니다.
□attachEvent()를 사용하여 추가하면 이벤트 객체가 매개변수로 전달됩니다. window.event를 통해서도 접근할 수 있습니다.
□HTML 속성을 통해 이벤트 핸들러를 지정할 때 이벤트라는 변수를 통해 이벤트 객체에 접근할 수 있습니다.
②IE의 모든 이벤트 개체에는 다음 속성/메서드가 포함됩니다.
□cancelBubble: 기본값은 false, 이벤트 버블링을 취소하려면 true로 설정합니다(DOM의 stopPropagation() 메서드와 유사)
□returnValue: 기본값 이벤트의 기본 동작을 취소하려면 false로 설정합니다. (DOM2의 PreventDefault() 메소드와 유사)
□srcElement: 이벤트 대상(DOM2의 대상 속성과 동일)
□type: 트리거되는 이벤트 유형.
3.3 크로스 브라우저 이벤트 객체
var eventUtil = {
getEvent : function(event){
Return event ? Event : window.event
},
getTarget : function ( event){
return event.target || event.srcElement;
},
preventDefault : function(event){
if(event.preventDefault){
event.preventDefault() ;
}else{
event.returnValue = false;
}
},
stopPropagation : function(event){
if(event.stopPropagation){
event. ();
}else{
event.cancelBubble = true;
}
}
4. 이벤트 유형
□마우스 이벤트 마우스 페이지에서 작업이 수행될 때 트리거됩니다.
□키보드 이벤트, 사용자가 키보드를 통해 페이지에서 작업을 수행할 때 트리거됩니다.
□HTML 이벤트, 브라우저 창이 변경되거나 특정 클라이언트/서버일 때; 상호 작용이 트리거됩니다.
□기본 DOM 구조가 변경될 때 트리거되는 돌연변이 이벤트입니다.
4.1 UI 이벤트
UI 이벤트는 주로 요소 포커스와 관련이 있으며 DOM 호환 브라우저에서만 지원됩니다.
□DOMActive: 요소가 사용자 조작(마우스 또는 키보드를 통해)에 의해 활성화되었음을 나타냅니다.
□DOMFocusIN: 요소가 포커스를 얻었음을 나타냅니다.
□DOMFocusOut: 요소가 포커스를 잃었음을 나타냅니다. in HTML;
△지원되는 브라우저가 매우 적기 때문에 권장하지 않습니다.
4.2 마우스 이벤트
① DOM에는 7개의 마우스 이벤트가 정의되어 있습니다. 페이지의 모든 요소는 마우스 이벤트를 지원합니다.
□click: 사용자가 메인 마우스 버튼(왼쪽에 있는 버튼)을 클릭할 때 일반 공식) 또는 Enter 키를 누르면 트리거됩니다.
□dblclick: 사용자가 기본 마우스 버튼(보통 왼쪽 버튼)을 두 번 클릭할 때 트리거됩니다.
□mousedown: 사용자가 마우스 버튼을 누를 때 트리거됩니다. 이 이벤트는 키보드를 통해 트리거될 수 없습니다.
□mouseout: 마우스 포인터가 요소 위에 있고 사용자가 이를 다른 요소로 이동할 때 발생합니다. 새로 이동된 요소는 이전 요소 외부에 있거나 해당 요소의 하위 요소일 수 있습니다. 키보드를 통해 트리거할 수 없습니다.
□mouseover: 마우스 포인터가 요소 외부에 있다가 사용자가 처음으로 다른 요소 경계 내에서 마우스 포인터를 움직일 때 트리거됩니다. 키보드를 통해 트리거되지 않습니다.
□mouseup: 사용자가 마우스 버튼을 놓을 때 트리거됩니다. 키보드를 통해 트리거되지 않습니다.
□mousemove: 마우스 포인터가 요소 내부에서 움직일 때 반복적으로 트리거됩니다. 키보드를 통해 트리거할 수 없습니다.
②참고:
□click 이벤트는 동일한 요소에서 mousedown 및 mouseup 이벤트가 연속적으로 발생하는 경우에만 발생합니다. mousedown 또는 mouseup이 취소되면 클릭 이벤트가 트리거되지 않습니다.
□dblclick 이벤트가 발생하기 전에 동일한 요소가 연속으로 두 번 클릭 이벤트를 발생시킵니다.
4.2.1 클라이언트 영역 좌표 위치
□브라우저 뷰포트의 특정 위치에서 마우스 이벤트가 발생합니다. 이 위치 정보는 이벤트 객체의 clientX 및 clientY 속성에 저장됩니다.
4.2.2 화면 좌표 위치
□마우스 이벤트가 발생하면 컴퓨터 화면 전체를 기준으로 한 위치도 있습니다. 이벤트 객체(event)의 screenX, screenY 속성에 저장됩니다.
4.2.3 수정자 키
□마우스 이벤트는 주로 마우스를 사용하여 발생하지만 키보드의 특정 키도 마우스를 눌렀을 때 필요한 작업에 영향을 줄 수 있습니다.
□수정 키는 Shift, Ctrl, Alt 및 Meta(Apple에서는 cmd 키, Windows에서는 windows 키)입니다.
□ DOM의 네 가지 키(마우스 이벤트 시)를 나타내는 부울 속성: ShiftKey, ctrlKey, altKey 및 MetaKey(IE는 MetaKey를 지원하지 않음)
4.2.4 관련 요소
mouseover 및 mouseout 이벤트가 발생하면 더 많은 요소가 관련됩니다. 두 이벤트 모두 한 요소의 경계 내에서 다른 요소의 경계 내로 마우스 포인터를 이동하는 것과 관련됩니다.
□DOM은 evnet 객체의 관련Target 속성을 통해 관련 요소 정보를 제공합니다.
□IE는 관련 타겟 속성을 지원하지 않습니다.
◇mouserover 이벤트가 발생하면 IE의 fromElement 속성에 해당 요소가 저장됩니다.
◇mouseout 이벤트가 발생하면 IE의 toElement 속성이 해당 요소를 저장합니다.
□호환 메소드:
var eventUtil = {
getRelatedTarget : function(event){
if(event.관련Target){
return event.관련Target
}else if(event; .toElement){
return event.toElement;
}else if(event.fromElement){
return event.fromElement
}else{
return null; >}
};
4.2.5 마우스 버튼
□클릭 이벤트: 기본 마우스 버튼을 클릭하면 발생하며, 키 정보를 감지할 필요가 없습니다.
□Mousedown 및 mouseup 이벤트에는 이벤트 객체에 버튼 속성이 있어 버튼을 누르거나 떼는 것을 나타냅니다.
□DOM의 버튼 속성 값:
◇0은 기본 마우스 버튼을 의미
◇1마우스 가운데 버튼(휠 버튼)
◇2보조 마우스 버튼
□IE에서 제공하는 버튼 속성
◇ 0 버튼 없음 ◇1 기본 키 누르기 ◇2 보조 키 누르기 ◇3 기본 및 보조 동시에 ◇4 중간 버튼 ◇5 기본 ◇6 보조 ◇7 기본 및 보조
□호환 코드
getButton : 기능(이벤트 ){
if(document.implementation.hasFeature("MouseEvents","2.0")){
return event.button
}else{
switch(event.button){
사례 0 :
사례 1 :
사례 3 :
사례 5 :
사례 7 :
반환 0
사례 2 :
사례 6 :
반환 2; ;
case 4:
return 1;
}
}
}
}
□기본 키를 누르거나 떼지 않으면 Opera는 mouseup 또는 mousedown
4.2.6 추가 이벤트 정보
dom2의 □detail 속성: 요소 클릭 횟수, 요소를 떠난 후 0으로 지워짐
□IE는 마우스에 추가 정보를 추가합니다. (IE에서만 지원되며 실질적인 가치는 없습니다).
4.2.7 모바일 사파리
아이폰, 아이팟 사파리 개발 시:
□ dblclick 이벤트는 지원하지 않습니다. Safari 창을 두 번 클릭하면 확대되며 해당 동작을 변경할 수 있는 방법은 없습니다.
□클릭 가능한 요소를 탭하면 먼저 마우스 이동 이벤트가 발생합니다. 콘텐츠가 변경되면 다른 이벤트는 발생하지 않습니다. 내용 변경이 없으면 mousedown, mouseup, click이 동시에 발생합니다.
□mousemove 이벤트는 mouseover 및 mouseout 이벤트도 트리거합니다.
4.2.7 접근성 문제
스크린 리더는 클릭을 통해서만 이벤트를 실행할 수 있습니다. 마우스 이벤트 사용 시 주의 사항:
□ 클릭 이벤트를 사용하여 코드 실행
□ 사용자에게 새 옵션을 표시하기 위해 onmouseover를 사용하지 마세요. 스크린 리더가 실행되지 않습니다.
□dblclick을 사용하여 중요한 작업을 수행하지 마세요. 키보드를 실행할 수 없습니다.
4.3 키보드 이벤트
① 키보드 이벤트 지원은 주로 DOM 레벨 0을 따릅니다. "DOM 레벨 3"은 키보드 이벤트를 지정합니다.
②3가지 키보드 이벤트:
□keydown: 사용자가 키보드의 아무 키나 눌렀을 때 발생하며, 계속 누르고 있으면 이 이벤트가 반복적으로 발생합니다.
□keypress: 사용자가 키보드의 문자 키를 누를 때 발생합니다. 사용자가 해당 키를 길게 누르면 이 이벤트가 반복적으로 발생합니다.
□keyup: 사용자가 키보드의 키를 놓을 때 트리거됩니다.
□마우스 이벤트와 동일하며, 동일한 수정키를 지원합니다. 또한 키보드 이벤트 객체에는 shifKey, ctrlKey, altKey 및 MetaKey 속성도 있습니다.
4.3.1 키 코드
①keydown 및 keyup 이벤트가 발생하면 이벤트 객체의 keyCode 속성에 키보드의 특정 키에 해당하는 코드가 포함됩니다.
②keyCode 속성값은 ASCII 코드의 해당 소문자 또는 숫자의 인코딩과 동일합니다. P304 테이블 확인
③ DOM 및 IE 이벤트 객체 모두 keyCode 속성을 지원합니다.
IVkeydown, keyup 이벤트와 관계없이 발생하는 특수한 상황은 다음과 같습니다.
□Firefox, Opera에서는 세미콜론 키를 눌렀을 때 keyCode 값이 ASCII 값인 59인데, IE와 Safari는 return을 반환합니다. 186, 키보드 키코드
□ 이전 버전의 사파리 3에서는 상하좌우, 페이지 상하가 6300보다 큰 값을 반환했습니다.
□Opera 9.5 이전 버전에서는 숫자가 아닌 알파벳 키의 keyCode가 ASCII 인코딩으로 설정됩니다.
□Safari 3 이전 버전에서는 Tab, Shift, Control 또는 대체 키를 눌러도 keydown 및 keyup 이벤트가 트리거되지 않았습니다.
4.3.2 문자 인코딩
□Firefox, Chrome, Safari의 이벤트 객체는 charCode 속성을 지원합니다. 이 속성은 키를 눌렀을 때만 값을 가지며 문자의 ASCII 인코딩입니다. 이때 keyCode 값은 0일 수도 있고, 누른 키코드일 수도 있습니다.
□IE와 Opera는 ASCII 인코딩을 keyCode에 저장합니다.
□크로스 브라우저 문자 인코딩
var EventUtil = {
//생략된 코드
getCharCode: function(event){
if(typeof event.charCode == "number") {
return event.charCode;
}else{
return event.keyCode;
}
},
4.3.4 textInput 이벤트
□언제 사용자가 편집 가능한 영역에 문자를 입력하면 textInput 이벤트가 트리거됩니다.
◇편집 영역에서만 textInput 이벤트를 트리거할 수 있습니다.
◇실제 문자를 입력할 수 있는 키를 눌렀을 때만 이벤트가 발생합니다.
◇이벤트 객체에는 사용자가 입력한 문자를 저장하기 위한 데이터 속성이 포함되어 있습니다.
□2008년 상반기에는 Safari3와 Chrome만 지원합니다.
4.3.4 기기의 키보드 이벤트. (생략)
4.4 HTML 이벤트
①정의: HTML 이벤트는 반드시 사용자 조작과 관련이 없는 이벤트를 말합니다.
□로드 이벤트:
◇페이지가 완전히 로드되면 창에서 발생합니다.
◇모든 프레임이 로드될 때 프레임세트에서 트리거
◇이미지가 로드될 때 요소에서 트리거
◇삽입된 콘텐츠가 로드될 때