① 이벤트의 역할
사용자가 무슨 일을 했는지, 또는 페이지가 언제 로드 되었는지와 같은 정보를 제공해주는 것
② 이벤트와 객체의 관련성
동작 중인 브라우저에 구현된 DOM에 가장 큰 영향을 받는 것으로 객체와 가장 밀접한 관계를 가지고 있다.
③ 이벤트의 기본 처리 방식
(X)HTML 객체 태그나 자바스크립트 코드 블록 또는 파일 내에서 이루어진다.
④ w3c는 이벤트 개념
㉠ 사용자 인터페이스 (마우스 , 키보드)
㉡ 논리(처리 결과)
㉢ 변경(문서를 수정하는 일)
⑤ 이벤트 관련 객체
⑵ DOM 레벨 0의 이벤트 핸들러
- 최초의 이벤트 시스템은 Events 또는 DOM 레벨 0라고 불린다.
- DOM 레벨 0 이벤트
현재의 모질라 / 파이어폭스에 해당하는 구 넷스케이프와 IE로 나눈다.
- 객체 이벤트에 이벤트 핸들러를 통해서 새로운 기능이나 개선된 기능을 추가하는 방식
- 이벤트 핸들러
객체 프로퍼티 중 하나로 구문은 onevent
- 이벤트 핸들러의 이름은 'on'으로 시작하며 그 뒤에 이벤트명(load, click 등)이 붙는다.
- 객체에 직접 이벤트 핸들러를 추가하는 방법
<body onload = 'var i = 23 ; i *=3 ; alert(i);'> // 이벤트 핸들러 이름을 객체 태그의 속으로 넣는다.
// 해당 이벤트가 발생했을 때 실행 할 코드를 지정해주는 것
- 인라인 모델(inline model) 또는 인라인 등록 모델(inline registration model)
이벤트를 HTML 엘리먼트의 속성으로 추가하는 방식 , 여러개의 함수를 호출하는 경우는 ;(세미콜론)으로 구분한다.
<body onload = 'javascript
- 이벤트 핸들러를 객체의 프로퍼티로 취급하여 직접 접근도 가능하다.
window.onload = 함수객체 // 제거하기 위해서는 null
- 기본 모델(traditional model) 또는 기본 등록 모델(traditional registration model)
이벤트 핸들러를 객체의 프로퍼티로 취급하여 함수를 배정하는 방식
function Msg_Event(){
var strMsg = 'Thank you';
alert(strMsg);
}
window.onload = Msg_Event();
<body onload = 'javascript
① 이벤트 객체
- IE나 파이어 폭스 공통으로 사용되는 Event 프로퍼티
① altKey
이벤트가 발생한 시점에서의 Alt 키의 눌림 여부
② clientX
클라이언트의 X좌표
③ clientY
클라이언트의 Y좌표
④ ctrlKey
이벤트가 발생한 시점에서 ctrl 키의 눌림 여부
⑤ keyCode
눌린 키의 코드값(숫자)
⑥ screenX
이벤트가 발생한 스크린 X 좌표
⑦ screenY
이벤트가 발생한 스크린 Y 좌표
⑧ shiftKey
이벤트가 발생한 시점에서 shift 키의 눌림 여부
⑨ type
이벤트 종류
⑩ fromElement (IE) , relatedTarget(파이어 폭스, 넷스케이프)
onMouseOver나 onMouseOut 이벤트를 사용할 경우의 마우스 객체
⑪ toElement(IE) , currentTarget(파이어 폭스, 넷스케이프)
마우스 포인터 위치해 있는 객체 설정 혹은 현재 접근하는 엘리먼트
⑫ scrElement(IE) , target(파이어 폭스, 넷스케이프)
이벤트를 발생한 객체 설정 혹은 이벤트를 직접 받는 객체
⑬ 이벤트 프로퍼티 기타 목록
㉠ bubbles
이벤트가 DOM을 통해서 버블링 되었는지의 여부
㉡ button
마우스 버튼의 상태(눌림 여부)
㉢ cancelBubble
버블링의 취소 여부
㉣ cancelable
이벤트의 취소 여부
㉤ detail
이벤트의 세부 사항
㉥ eventPhase
이벤트의 진행 단계
㉦ isChar
이벤트가 문자를 발생시키는지의 여부
㉧ layerX , layerY
position 프로퍼티가 absolute인 경우,
현재 레이어에서의 상대 x(y) 좌표
㉨ metaKey
메타 키 (ctrl/alt/shift 키) 의 상태 (눌림 여부)
㉩ pageY , pageX
페이지 내의 상대 x(y) 좌표
㉪ timeStamp
이벤트가 발생한 시각
㉫ view
이벤트가 생성된 AbstractView ( 무슨 말이지 모르겠네요)
㉬ which
눌린 키의 유니코드 값
- IE 에서는 Event가 window 객체의 프로퍼티로 이벤트가 발생하면 그에 따른 데이터가 프로퍼티에 담긴다.
function mouseDown(){
var locStr = 'x = ' + window.event.screenX + ' y = ' + window.event.screenY;
alert(locStr);
}
document.onmousedown = mouseDown;
- 파이어 폭스는 nsEvent 이벤트 객체로 이벤트가 발생하여 그에 따른 데이터가 프로퍼티에 담긴다.
function mouseDown(nsEvent){
var locStr = 'x = ' + nsEvent.screenX + ' y = ' + nsEvent.screenY;
alert(locStr);
}
document.onmousedown = mouseDown;
- 크로스 브라우저 코드
여러 브라우저에서 호환되는 코드 , 즉 DOM 레벨 0 이벤트가 IE와 파이어 폭스(넷스케이프)로 나누어져 있으므로
자바스크립트 코드를 작성할 코드 호환되도록 작성하는 코드
function mouseDown(nsEvent){
var theEvent = nsEvent ? nsEvent : window.event;
var locStr = 'x = ' + theEvent .screenX + ' y = ' + theEvent .screenY;
alert(locStr);
}
document.onmousedown = mouseDown;
② 이벤트 버블링(IE) , 이벤트 캡처링(넷스케이프 , 파이어폭스)
하나의 이벤트가 하나의 엘리먼트에만 영향을 미치는 것이 아니라 여러 개의 엘리먼트에 영향을 미칠 경우를 말함.
<script type = 'text/javascript'>
function mouseDown(nsEvent){
var theEvent = nsEvent ? nsEvent : window.event;
var locString = 'X = ' + theEvent.screenX + ' Y = ' + theEvent.screenY;
var theSrc = theEvent.target ? theEvent.target : theEvent.srcElement;
alert(locString + ' ' + theSrc);
/*
버블 이벤트 종료 시키기 아래 함수를 호출하기 위해 이벤트 버블을 하지 않는다.
*/
// document.onmousedown = stopEvent;
}
document.onmousedown = function(evnt){
var theEvnt = evnt ? evnt : window.event;
alert('*' + theEvnt.type);
}
window.onload = setupEvents;
function setupEvents(){
document.getElementById('1st').onmousedown = mouseDown;
document.getElementById('2st').onmousedown = function () {
alert('Second event handler');
}
}
/* 버블 함수를 종료시키기 위한 함수 */
/*
function stopEvent(evnt){
if(evnt.stopPropagation){
evnt.stopPropagation(); // 넷스케이프의 경우
}else{
evnt.cancelBubble = true; // IE의 경우
}
}
*/
</script>
****************************************************************************
<div id = '1st' style='padding : 20px ; background-color : #feb ; width : 150px'>
<div id = '2st' style='background-color : #f00; width : 100px ; height : 100px'>
</div>
</div>
*****************************************************************************
③ 이벤트 핸들러와 this
이벤트 핸들러 함수나 객체 메소드 내에서 엘리먼트의 프로퍼티에 접근하기 위해 this를 사용한다.
window.onload = setupObjects;
function setupObjects() {
document.personData.firstName.onblur = testValue;
}
function testValue() {
alert('Hi ' + this.value); // 폼 필드값
}
*****************************************************************************
<form name = 'personData'>
First Name : <input type='text' name = 'firstName' /> <br /> <br />
Second Name : <input type = 'text' name = 'secondName' />
</form>
*****************************************************************************
※ DOM 레벨 2 이벤트 모델과 이전 버전과의 차이점
- 특정 이벤트 핸들러 프로퍼티에 의존적이지 않음.
- 하나의 이벤트나 객체 다수의 이벤트 핸들러를 등록이 가능함.
- 이벤트 핸들러의 프로퍼티 외에 각 객체는 세가지 메소드를 가지고 있음.
㉠ addEventListener
이벤트 리스너를 추가하기 위한 메소드
예)
object.addEventListener('이벤트명' , '이벤트 함수', true|false);
- 이벤트명 : click 이나 onload 등등...
- 이벤트 함수명 : 개발자가 작성한 함수명
- true | false { 케스케이드다운(cascade-down)과 버블업(bubble-up)의 두 가지 방식)}
true : 케스케이드 다운 방식
false : 버블 방식
㉡ removeListener
기존 리스너를 제거하기 위한 메소드
㉢ dispatchListener
이벤트를 신속히 처리하기 위한 메소드
[넷스케이프 , 파이어폭스 전용] , IE에서는 에러
function writeX(evnt){
alert('Capturing : ' + evnt.target + ' ' + evnt.currentTarget);
return true;
}
function writeY(evnt){
alert('Bubbing : ' + evnt.target + ' ' + evnt.currentTarget);
return true;
}
window.onload = setup;
function setup(evnt){
// 이벤트 캡처
document.addEventListener('click', writeX, true);
document.forms[0].addEventListener('click',writeX,true);
document.froms[0].elements[0].addEventListener('click',writeX,true);
// 이벤트 버블업 - 실행되지 않음 .....
document.addEventListener('click',writeY,false);
document.forms[0].addEventListener('click',writeY,false);
document.forms[0].elements[0].addEventListener('click',writeY,false);
}
※ AddEventListener를 IE 7에서는 지원하지 않음
***********************************************************************************
AddEventListener를 사용하지 못할 경우 아래 와 같은 방법을 사용한다.
크로스 브라우저 코드
***********************************************************************************
function clickMe(evnt){
evnt = evnt ? evnt : window.event;
alert(evnt.target + ' ' + evnt.type);
alert('Can be canceled? ' + evnt.cancelable);
alert('Bubbling? ' + evnt.bubbles);
alert(evnt.timeStamp);
}
window.onload = setup;
/*
윈도우 unload 이벤트를 캡처해서 detachEvent로 설정된 이벤트들을 제거해야 한다.
윈도우의 메모리 낭비를 막기위해 사용된다.
*/
window.onunload = cleanup;
function setup(evnt){
var evtObject = document.getElementById('clickme');
// 객체 모델 테스트
if(evtObject.addEventListener){
document.addEventListener('click',clickMe,false);
}else if(evtObject.attachEvent){
evtObject.attachEvent('onclick',clickMe);
}else if(evtObject.onclick){
evtObject.onclick = clickMe;
}
}
// 이벤트 핸들러 제거 (IE이 경우 적용)
function cleanup(){
var evtObject = document.getElementById('clickme');
if(evtObject.detachEvent){
evtBoject.detachEvent('onclick', clickMe);
}
}
④ 이벤트 생성
특정 시점에 이벤트를 발생시키는 경우에 사용된다. (대표적으로 focus() 메소드를 사용하는 경우 사용한다.)
window.onload = setObjects;
function setObjects() {
document.personData.lastName.focus();
}
<form name = 'personData'>
First Name : <input type = 'text' name = 'firstName' /><br /> <br />
Last Name : <input type = 'text' name = 'lastName' />
</form>
