prototype사용자를 위한 dojo 입문 (4)

제 4 장 이벤트

javascript로 심각한 코딩을 해본 사람이라면 누구나 사소한 브라우져들간의 차이에 좌절한 경험이 있을 것이다. 문제는 prototype이나 dojo같은 멋진 넘들이 넘쳐나는 세상에도 여전히 과거의 코드에 매여있는 사람들이 있다는 것이다.
 
일단, 이런 HTML이 있다고 생각하자:

...
<button id='okBtn'>OK!</button>
...

* DOM

var okBtn = document.getElementById('okBtn');
if (okBtn.addEventListener) {
  okBtn.addEventListener('click', ok_onclick, true);
} else {
  okBtn.attachEvent('onclick', ok_onclick);
  okBtn.captureEvents(Event.CLICK);
}
function ok_onclick(e) {
  if (!e) e = window.event;
  if (e.keyCode) code = e.keyCode;
  else if (e.which) code = e.which;
  ...
  e.cancelBubble = true;
  if (e.stopPropagation) e.stopPropagation();
}

* prototype

Event.observe($('okBtn'), 'click', function(event) { ... } )

* dojo

dojo.connect(dojo.byId('okBtn'), 'onclick', function(event) { ... } )

결정적인 차이는(?!) prototype과 달리 dojo는 'on'을 항상 붙여야 한다(예: onclick, onchange)는 것이다. dojo의 위젯(dijit)들은 이벤트 이름을 대소문자를 섞어서 사용해서(예: onClick, onChange) 표준 이벤트들과 구별한다.

사실 dojo.connect()는 이벤트 핸들러 연결보다 더 많은 일을 한다. 실제 구현은 AOP의 before advice에 가깝다고 볼 수 있다. 즉, 일반적인 함수에 대해서도 적용 가능하다.

dojo는 페이지 load/unload 이벤트를 다른 이벤트와는 조금 다르게 취급한다:

* BOM

window.onload = function() { ... }
window.onunload = function() { ... }

* prototype

Event.observe(window, 'load', function() { ... });
Event.observe(window, 'unload', function() { ... });

* dojo

dojo.addOnLoad(function() { ... });
dojo.addOnUnload(function() { ... });

엄밀하게 따지면, dojo.addOnLoad()는 DOMContentLoaded 이벤트 핸들러를 연결한다. 이게 뭔지 아시는 분이라면 따로 설명이 필요 없을테고, 그게 뭐냐고 하시는 분이라면 몰라도 되는 분일테니... 여기서 이러쿵 저러쿵 설명 안하겠다.

dojo.connect(window, 'onload', function() { ... }); 라고 해도 비슷한 결과를 얻겠지만... 미묘~~한 부분이 있다.

마지막으로 dojo에는 Topic 이벤트 시스템이라는 특이한 녀석이 하나 더 있다:

dojo.publish('/some/topic', value1, value2);
dojo.subscribe('/some/topic', function(arg1, arg2) { ... } );

"익명/공용/전역 메시지 큐" 비슷한 것인데, AJAX의 첫번째 A(Asynchronous) 때문에(덕분에?) 꽤 유용하게 써먹을 수 있다. 자세한 내용을 늘 그랬듯이 온라인 문서를 참고하시길...

다음에는 OOP 지원 기능에 대해서 알아보기로 하고... 오늘은 요기까지~.~/