'event'에 해당되는 글 1건

  1. 2007.11.15 Custom Events in Prototype Javascript Framework (1)
사용자 삽입 이미지
몇일전 1.6.0 정식버젼으로 릴리즈 된 Prototype.js 의 변화 중 Event 오브젝트의 사용자 이벤트부분이 있습니다.
OOP 개발을 하다보면 이벤트 밖의 처리와 이벤트 안의 처리 좀 더 자세히 말하자면

리스너와 핸들러 핸들러 Scope 안과 밖에서 일어나는 모든 일들을 처리하자면 어려운 점들이 간혹 생깁니다.
예를 들어 Scope 안의 this와 밖의 this 분명 차이가 있죠...

아 이건 사용자 이벤트와는 무관하니 넘아갑니다.


이벤트 리스너 등록(Observing events)

<img src="./test_off.gif" onmouseOver="this.src='./test_on.gif'" onmouseOut="this.src='./test_of.gif'" />

<input type="button" onclick="javascript:buttonClick(event);" id="button" value="Ok"/>
<script type="text/javascript">
    function buttonClick(event){
        alert(event);
    }
</script>

우리는 iniline 스크립트로 대부분 이런식의 이벤트를 줍니다. 하지만 web2.0방식의 oop 개발에 있어서는
그 다지 추천할만한 방법은 아니라고 보여집니다.

Prototype.js 에서 지원하는 이벤트 Observing

<div id="test"></div>
<script type="text/javascript">
    Element.observe('test', 'mouseover', bgChange);  <-- target Element id 를 통한 mouseover 리스너 설정

    $('test').observe('mouseover', bgChange);  <-- target Element 에 mouseover 리스너 설정

    function bgChange(event){
        var targetElement = Event.element(event);  <-- 1.6.0 에서는 var targetElement = event.target;
    }
</script>

이 벤트 리스너와 핸들러에 대한 구분과 실제 DOM 레벨 addEventListener, dipatchEventListener 등을 알아야합니다. 프레임웍의 편리한 점도 있지만 원천적으로 알아야할 부분을 모르고 사용한다면 코더에 불과해집니다.



사용자 이벤트(custom events)

대부분에 잘 알려진 Javascript 프레임웍에서는 이미 사용자 이벤트가 있습니다. 그리고 Prototype에 적용되기 전에 매우 긴 방법을 사용했습니다. Prototype.js 의 사용자 이벤트는 다른 프레임웍과 틀립니다.
사용자 이벤트를 사용하기 위해서 namespace에 event name을 등록해야 된다는 것인데요.

  'namespace:eventname' 이 처럼 하면 됩니다.

사용자 이벤트 부분을 담당해서 개발했던 Sam은 사용자 이벤트를 이렇게 사용해야 된다는 것에 이처럼 말했습니다.
  
  " 작지만 중요한 변화는 사용자 이벤트를 만들어졌다.[7835] : 모든 사용자 이벤트 명은 namespace에 등록되어야 합니다.  이것은 Prototype.js 만의 솔루션이고 "mousewheel" 과 "DOMMouseScroll" 처럼 비표준 네이티브 DOM 이벤트이기 때문에 사용자 이벤트 네임의 충돌문제를 해결하기 위함입니다. "

$('pandora').observe('PTV:play', function(event) {
   alert(event.memo);
  });
이 예제는 'PTV' namespace에 있는 'play' 이벤트를 실행하는 방법입니다.


Prototype Custom Event 중 한가지

Prototype 1.6.0 정식 버젼에서는  'dom:loaded' 이벤트를 가지고 있습니다.
window 오브젝트에 의해서 이 이벤트는 실행되는데요. 이 이벤트는 DOM tree 즉 document가 모두 load 되고 나면 실행되게 됩니다. document가 모두 load되었다는 것은 쉽게는 html 문서가 다운로드 됨을 의미합니다.

그안에 내포된 image 리소스까지 모두 다운로드 됨을 의미하는것은 아닙니다.

우리가 브라우저를 통해 원격지의 어떤 URL을 요청하게 되면 그 URL의 HTML 문서 즉 document 객체가 모두 다운로드 다운로드되고 DOM에 의해서 랜더링 과정을 거치면서 거기에 해당되는 js, css, img 들을 요청합니다.
이래서 HTTP Request 가 계속 발생하게 됩니다.

이런 과정이 많을 수록 웹 페이지의 포퍼먼스는 떨어지게 됩니다.
본론으로 들어가서요. document 가 onload가 되면 'dom' namespace의 loaded 사용자 이벤트가 발생하게 되어있습니다.



제가 생각할때 이 사용자 이벤트는 상당히 고급 Web App를 개발하는데 큰 도움이 됩니다.
IE에서는 fireEvent 가 내부적으로 지원을 하고 있습니다. 하지만 FF, Opera, Safari에서는 자체적 지원은 되지 않고 DOM 메서드를 통해서 어렵게(?) 구현을 해야합니다.

간지러운 부분을 Prototype에서 이번에 잘 긁어 주었네요.
신고
Posted by Rhio.kim