이벤트 에는 다양한 타입이 있으며 크게 다음과 같이 나눌수 있다.
역동적인 유저 인터페이스를 작성 하기 위해 이들의 이벤트 타입, 프로퍼티, 이벤트 리스너 그리고 AJAX에 대해서 알아 보자
이벤트와 AJAX
AJAX는 특별한 경우를 제외하고는 submit 버튼을 이용한 FORM전체를 서버로 보내는 처리는 하지 않는다.
특정한 데이터만 서버로 보내기 ?문이다. AJAX처리에 핵심은 클라이언트에서 데이터를 체크 한다는 것에 있다.
최대한 클라이언트에서 데이터를 체크 하고 클라이언트 에서 불가능한 부분을 비지니스 프로세스로 처리 하거나
데이터베이스의 CRUD 처리를 한다.
이를 위해서는 이벤트에 대한 세분화된 분류가 필요하다.
발생한 이벤트를 처리하는걸 DHTML에서는 이벤트 핸들러 DOM 에서는 이벤트 리스너 라고 한다 여기서는 용어를 이벤트 리스너로 하겠다.
이 이벤트 리스너의 처리를 PROTOTYPE.JS를 이용하지 않고 처리하는 예제를 살펴 보자
예제명 : eventListener.html
Event.observe(window, 'load', function() {
var clickChoice = $('elementClick');
if (clickChoice.addEventListener) {
clickChoice.addEventListener('click', Show.webPage, false);
} else {
clickChoice.attachEvent('onclick', Show.webPage);
}
});
이벤트 메서드를 설정하는 메서드는 브라우저 마다 다르다 따라서 이벤트 리스너 메서드의 존재 여부를 체크하여 이벤트 리스너를 설정해야한다.
IE 에서는 attachEvent()메서드를 사용하고 IE브라우저에는 addEventListener 메서드를 사용한다.
아규먼트로 실행할 메서드(Show.webPage)를 지정할때 ()를 붙이지 않는이유는 '()'를 붙이면 메서드에서 처리한 결과값을 받겠다는 의미가 되므로 여기서는 이름만 지정을 한다.
서로 다른 브라우저에서는 이와같이 각각의 이벤틀리스너를 체크 해야 하는데 PROTOTYPE.JS를 통해서 크로스브라우징 처리를 어떻게 하는지 살펴 보자.
파이어폭스 브라우저에는 windopw.Event가 있지만 IE브라우저에는 window.Event가 없으므로 Event 오브젝트를 생성해야 한다.
.
if (!window.Event) var Event = { };
Object.extend(Event, {
속성및 Event메서드
}
주요 메소드 (전체가 필요할경우 책 또는 프로토타입참고하기 바란다.)
| 메서드 | 기능개요 | ||
|---|---|---|---|
| observe | 이벤트 리스너를 설정 한다. 첫 번째 아규먼테 이벤트가 발생 하는 엘리먼트 ID를 지정하고 두번째 아규먼트에 이벤트 타입을 지정하고 세 번째 아규먼트에 이벤트가 발생할때 실행할 메서드를 지정하고 네 번째 아규먼트에 버블/캡쳐를 지정한다. 네 번째 아규먼트를 지정하지 않으면 false로 설정된다. | ||
| element | 이벤트가 발생한 엘리먼트를 인식한다. 아구먼트를 선언만 하면된다. | ||
| stopObserving | 설정한 이벤트 리스너를 해제한다. 따라서, 이벤트가 발생할 수 없게 된다. | ||
| isLeftClick | 마우스 왼쪽 버튼의 클릭 여부를 인식 한다. mousedown 과 mouseup은 IE와 파이어폭스 모두 true를 반환 하지만 click은 IE는 0 파이어폭스는 true를 반환한다. | pointerX, pointerY | pointerX 메서드는 마우스를 클릭한 가로 위치를 반환하고, pointerY 메서드는 세로 위치를 반환한다. 좌우상하로 스크롤한 값도 반영한다. |
| findElement | 두번째 아규먼트에 지정한 태그 이름과 같은 태그 이름을 이벤트가 발생한 엘리먼트부터 상위 엘리먼트 방향으로 찾아 반환한다. 만약 같은 태그 이름이 없으면 doucument를 반환한다 | ||
| stop | 버블을 방지한다. | ||
| unloadCache | 설정한 이벤트 리스너를 일괄적으로 해제하여 사용했던 메모리를 돌려준다. prototype.js내부에서 사용하는 메서드로 IE브라우저 인경우 실행한다. |
나머지 메소드는 내부처리를 위해서 사용되는 메소드 이다.
observe: function(element, eventName, handler) {
element = $(element);
var name = getDOMEventName(eventName);
var wrapper = createWrapper(element, eventName, handler);
if (!wrapper) return element;
if (element.addEventListener) {
element.addEventListener(name, wrapper, false);
} else {
element.attachEvent("on" + name, wrapper);
}
return element;
},
Selector 클래스의 목적은 아규먼트로 주어진 조건에 적합한 HTML의 엘리먼트(들)을 추출 하는것이다.
예제명 : divElements.html
.
.
.
var selectTag = new Selector('div');
var findScope = selectTag.findElements();
var idResult = [];
findScope.each(function(value, index) {
idResult[index] = value.id;
});
$('show1').innerHTML = '결과: ' + idResult.inspect();
'
'
'
위 예제는 간단한 Selector 예제로서 조건으로 주어진 'div'엘레먼트를 찾는 예제다. findElements() 메소드를 통하여 오브젝트 배열 엘리먼트를 만들고
오브젝트 배열 엘리먼트를 순차적으로 실행하는 Enumerable.each()를 통해 화면에 배열 엘리먼트를 출력한다.
-each() 메소드의 아규먼트는 each() 메소드가 설정 한다. 첫번째 인자는 배열의 엘리먼트가 순차적으로 설정되고 두번째 아규먼트는 배열의 인덱스가 온다.
initialize: function(expression) {
this.expression = expression.strip();
this.compileMatcher();
},
var selector = new Selector('div') 에서 아규먼트로 지정한 'div' 가 파라메터인 expresstion에 설정 되고
protorype 된 String 클래스를 확장한 메소드 strip()를 이용하여 문자열 양 끝의 공백을 제거한 내용을 expresstion에 담고
compileMatcher() 메소드를 호출한다.
예제명 : findElementsElmt.html
.
.
.
okClick: function(event) {
var selectTag = 'option'; // option 태그의 모든 엘리먼트 ID를 반환한다.
Show.result(selectTag, '1');
selectTag = '#sport'; // #은 지정한 엘리먼트 ID만 추출하라는 의미 이다.
Show.result(selectTag, '2');
selectTag = 'option.cssShow'; // option 태그의 css 이름이 cssShow인 엘리먼트만 추출한다.
Show.result(selectTag, '3');
Show.result(selectTag, '4', $('sport')); // scope를 받아 들여 원하는 영역을 출력하게 조정 한다.
},
result: function(selectTag, showID, scope) {
var newTag = new Selector(selectTag);
var findScope = newTag.findElements(scope);
var idResult = [];
findScope.each(function(value, index) {
idResult[index] = value.id;
});
$('show' + showID).innerHTML = showID + ' 결과: ' + idResult.inspect();
}
.
.
.
예제명 : findElementsAttr.html
.
.
.
okClick: function(event) {
selectTag = 'p[title]';
Show.result(selectTag, '1'); // p태그에 title 속성을 가진 엘리먼트를 돌려준다.
selectTag = '*[class]';
Show.result(selectTag, '2'); // *은 모든 엘리먼트를 대상으로 속성 또는 속성?을 매치한다. 현재는 title 속성을 가진 엘리먼트를 돌려준다.
selectTag = 'p[class="commClass"]';
Show.result(selectTag, '3'); // p 태그에 css 클래스가 commClass 인 엘리먼트를 반환 한다.
selectTag = 'p[class!="commClass"]';
Show.result(selectTag, '4'); // p 태그에 css 클래스가 commClass 가 아닌 엘리먼트를 반환 한다.
selectTag = 'p[class~="commClass"]';
Show.result(selectTag, '5'); // p 태그에 css 클래스가 commClass 로 시작하는 엘리먼트를 반환 한다.
},
result: function(selectTag, showID) {
var newTag = new Selector(selectTag);
var findScope = newTag.findElements();
var idResult = [];
findScope.each(function(value, index) {
idResult[index] = value.id;
});
$('show' + showID).innerHTML = showID + ' 결과: ' + idResult.inspect();
}
.
.
.
$$는 함수라는 명칭에서 알수 있듯이 클래스에 종속되어 있지 않아서 편하게 가져다가 쓸수있다.
예제명 : $$basic.html
.
.
.
okClick: function(event) {
var selectTag = document.getElementsByTagName('div'); //태그이름이 div인 모든 엘레먼트를 반환한다.
var idResult = [];
$A(selectTag).each(function(value, index) {
idResult[index] = value.id;
});
Show.result(idResult, '1');
selectTag = $$('div');
idResult = [];
selectTag.each(function(value, index) {
idResult[index] = value.id;
});
Show.result(idResult, '2');
idResult = [];
$$('div').each(function(value, index) {
idResult[index] = value.id;
});
Show.result(idResult, '3');
},
result: function(idResult, showID) {
$('show' + showID).innerHTML = showID + ' 결과: ' + idResult.inspect();
}
.
.
.
예제명 : $$Many.html
.
.
.
selectTag = $$('#sport option');
Show.result(selectTag, '2'); //$$는 findElements()메소드와는 다르게 공백을 기준으로 문자영을 분리 하여 처리 한다.
selectTag = $$('#river option', '#manyKind div');
Show.result(selectTag, '3'); //$$는 복수의 조건을 받아서 처리 할수 있다.
selectTag = $$('option.cssShow');
selectTag.each(function(value, index) {
$(value.id).selected = true;
});
Show.result(selectTag, '5');
.
.
.