[javascript - prototype] Event.observe의 사용법

원 글 http://kuna.wo.tc/568

Event.observe는 어떠한 객체에 이벤트를 붙일 수 있는 함수로서, 자바스크립트 라이브러리인라이브러리인 프로토타입에 정의되어 있기 때문에 prototype.js파일을 꼭 불러들여야만 정상적으로 스크립트가 실행이실행이 가능합니다.

 

Event.observe의 원형은 다음과 같습니다 :

Event.observe ( element, eventName, handler );

사용법은 더욱 간단합니다. 예를 들어 <span>태그가 있는데, id가 "test"라고 하고하고 마우스를 올렸을 때 "테스트"라는 안내문 메시지 박스를 띄운다고 하면 -

Event.observe( "test", "mouseover", function() { alert("테스트") } );

혹은

 

Event.observe( "test", "mouseover", temp );
function temp()
{
     alert("테스트");
}

와 같이 이용이이용이 가능합니다.

 

또, observe함수는 다른 방법으로도 이용할 수 있습니다있습니다 -

$("test").observe( "mouseover", function() { alert("테스트"); } );

이해가 가시나요? 프로토타입 클래스의 또다른 특징은 string으로string으로 받은 객체를 object로 변환시킬 수 있다는 것입니다. 정말로 편리한 기능이죠!

 

그리고 밑에 보이는 것처럼, 함수에서 임의의 변수(여기서는 event)event) 를 받아주면 현재 observe당하고 있는(이벤트가 걸린) 객체를 얻어낼 수가수가 있습니다.

 

function test( event )
{
     var ele = event.getElement();
     ...
}

 

 

 

이 observe함수를 이용하면 일일이 <a> 태그마다 onMouseover, onMouseout와 같은 핸들러를 직접직접 써내려가야만 하는 수고를 더 수 있습니다. 일례로 간단한 샘플 소스를 쓰도록쓰도록 하겠습니다.

 

<script language=javascript>
// 원래 테두리 모양새를 저장할 임시 변수
var befborderStyle;
// 페이지의 자바스크립트가 모두 로드되면 init 함수를 실행한다
document.observe( "dom:loaded", init );

function init()
{
     var items = document.getElementsByTagName("a");
     for (i=0; i<items.length; i++)
     {
          // 마우스를 올렸을 때와 내렸을 때에 이벤트를 적용시킨다
          Event.observe( items[i], "mouseover", linkMouseovr );
          Event.observe( items[i], "mouseout", linkMouseout );
     }
}

function linkMouseovr( event )
{
     // 마우스를 내린 링크 오브젝트를 얻는다
     var ele = event.getElement();
    
     // border 스타일을 바꾸기 전에 이전의 border스타일을 기억
     befborderStyle = ele.style.border;
     // border 스타일 변경
     ele.style.border = "#cccccc 1px dashed";
}

function linkMouseout( event )
{
     // 마우스를 내린 링크 오브젝트를 얻는다
     var ele = event.getElement();

     // 다시 예전의 테두리모양으로 변경한다
     ele.style.border = befborderStyle;
}
</script>

 머리속으로 짜낸 코드라서 정상작동의정상작동의 여부는 확신하지 못하지만 ^^;..

 

이런 식으로 이용이 가능합니다.가능합니다. 그러니까 일일이 object에 이벤트를 붙여줄 필요 없이, 이 함수를 이용하면 자바스크립트에서자바스크립트에서 동적으로 이벤트를 붙여줄 수 있는 거죠.

 

저는 prototype에서 제일 유용한 함수라고 생각하네요 ^^. 여러분들도 조금만 소스코드를 분석해 보시면 유용하게 활용이 가능하다고 생각합니다! :D