Dojo [펌] 2. Dojo Event Model

1. dojo.event.connect()를 이용한 사용자 이벤트 호출

  //Dojo 라이브러리 임포트

  <script language="JavaScript"
            type="text/javascript"
            src="dojo-0.3.1-ajax/dojo.js">               
   </script>   
   <script type="text/javascript">
        // 윈도우 로드시 함수 실행

        window.onload = function () {

                // 이벤트를 발생시킬 객체를 가져온다.
                var link = document.getElementById("mylink");

                // link 객체에 온클릭 이벤트 발생시 myHandler를 호출한다.
                dojo.event.connect(link, "onclick", myHandler);
            }

            // 이벤트를 처리할 "myHandler" 함수를 정의한다.
            function myHandler(evt) {
                          

             }
        </script>

    ==> 온로드시 함수 실행은 초기화 함수를 지정한 후

         dojo.event.connect(window, "onload", myInit);  

         다음과 같이 실행할 수 있다.

2. DOM  노드에 이벤트 핸들러 등록

    // 윈도우가 로드 될때 myInit 함수를 호출한다.

    dojo.event.connect(window, "onload", myInit);  

     function myInit() {

          //이벤트를 발생시킬 객체를 가져온다.
          var link = document.getElementById("mylink");

        // foo 함수를 가지고 있는 exampleObj를 생성한다.
         var exampleObj = {
             foo: function(){
                                  alert("exampleObj.foo: invoked " );
                    },
          };

          // foo 함수를 가지고 있는 exampleObj2를 생성한다.

          var exampleObj2= {
             foo: function(){
                                  alert("exampleObj.foo: invoked " );
                    },
          };

          // link 노드의 온클릭 속성에 객체와 발생할 함수를 등록한다.
          dojo.event.connect(link, "onclick", exampleObj, "foo");

         // link 노드의 온클릭 속성에 객체와 다수의 이벤트를 등록할 수 있다.
          dojo.event.connect(link, "onclick", exampleObj2, "foo");
       }

3. 연속적으로 발생하는 이벤트 등록

   // 두개의 함수를 가지고있는 객체를 생성한다.

   var exampleObj3 = {

         //객체가 호출된 횟수를 저장할 변수 선언
         counter: 0,
         foo: function(){
                               this.counter++;
                               alert("exampleObj3.foo: invoked, counter = " + this.counter );
          },
          bar: function(){
                                this.counter++;
                                alert("exampleObj3.bar: invoked, counter = " + this.counter ); 
          },                         
      };

       // exampleObj3 객체의 "foo" 함수가 호출되기 전에 "bar" 함수를 

       // 호출하도록 지정한다.
       dojo.event.connect("before", exampleObj3, "foo", exampleObj3, "bar");
                
        // The "foo" function of the exampleObj3 is registered for the
        // 노드의 온클릭 속성에 exampleObj3 의 foo함수를 등록한다..
         dojo.event.connect(link, "onclick", exampleObj3, "foo");     

  
4. dojo.event.connect는 기존의 이벤트에 다른 이벤트를 추가 할때 기존 이벤트를 수정하지 않고

   간단하게 추가할 수 있다.

5. dojo.event.connect(dojo.byId("foo"), "onmousemove",function(evt){ 
       alert("mouse at pos" + evt.pageX + "," + evt.pageY);
    });

    이벤객체를  통하여 이벤트에 관한 여러가지 정보를 알수있다.

    target, currentTarget, pageX/pageY, layerX/layerY, fromElement , toElement ,charCode

   또하 stopPropagation()  메소드를 통하여 관련된 이벤트를 취소할 수 있다.

6. 윈도가 load, unload 될 때 호출되는 함수의 등록은 보통 window.onLoad로 진행 한다.

   하지만  DOJO를 사용한다면 dojo.addOnLoad를 사용해야 한다.

   그 이유이는 dojo 객체가 로드 되기전에 초기화 함수가 호출 되어 nasty error를 발생시 킬 수

   있기 때문이다.

7. function Scroller() {
       this.setProducts = function(pid) {
       }
       this.handleEvent = function(args) {

           if (args.event == 'showProducts') {
                this.setProducts(args.value);
           }
       }
       this.load = function () {
           dojo.event.topic.subscribe("/scroller", this, handleEvent);
       }

    }

    function Accordion() {
       dojo.event.connect(link, "onclick", function(evt){
           this.target = target;
           dojo.event.topic.publish("/scroller", {event: "showProducts", value : target});
       });
    }

   위과 같이 "/scroller"를 통하여 웨젯과 객체관의 상호 작용을 할 수있다.