일반 자바스크립트에서 이벤트 처리에 대한 일련의 흐름

황제낙엽 2008.09.18 10:23 조회 수 : 522 추천:99

sitelink1  
sitelink2  
sitelink3  
sitelink4  
extra_vars4  
extra_vars5  
extra_vars6  
다음과 같은 코드가 있다.

< html>  
 < script>  
  function textSet(obj) {   
   obj.value = '아이디';   
  }   
 < /script>  
  < body onload="form1.id.focus();">  
    < form id=form1>  
      ID : < input type="text" id="id" onfocus="textSet(this);">< br />  
    < /form>  
  < /body>  
< /html>  


처음 페이지가 로드되면 id입력폼에 focus 이벤트를 발생시키게 된다.
id입력폼에서는 focus 이벤트가 발생할때마다 value 에 '아이디' 라는 글자를 출력하게끔 되어 있다.
당연한 흐름같지만 이 흐름을 보다 자세하게 분석할 필요가 있다고 판단하였다.

onload 는 body 태그에서 발생하는 이벤트 함수이다.
페이지가 로드되면 onload 이벤트가 자동으로 발생한다고 보면 된다.
그러면 스크립트 엔진은 body 태그의 onload 이벤트 객체를 catch하여 onload 에 연결된 사용자 정의 함수를 
실행하게 된다.
위의 코드에서는 onload 이벤트에 id입력폼의 focus 함수를 수행하도록 코드가 작성되어 있다.
focus 함수는 입력 포커스가 해당 객체에 위치하도록 하기도 하지만 최종적으로 onfocus 이벤트를 발생하기도 한다.
이렇게 사용자 정의 코드를 수행하여 id입력폼에 onfocus 이벤트가 발생하면 스크립트 엔진은 또다시 
id입력폼의 onfocus 이벤트를 catch하여 이에 연결된 사용자 정의 함수를 실행하게 되어 있다.

function 과 event 의 적절한 조합으로 보다 다이나믹한 user interface 환경을 쉽게 작성하는데에 도움을 받을 수 있다.
이 게시물을
목록
쓰기 태그