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 환경을 쉽게 작성하는데에 도움을 받을 수 있다.
댓글 0
번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
---|---|---|---|---|
30 | 자바 스크립트에서 sleep 기능을~ | 황제낙엽 | 2008.10.02 | 32 |
29 | position스타일과 top, left스타일 | 황제낙엽 | 2008.09.24 | 28 |
» | 자바스크립트에서 이벤트 처리에 대한 일련의 흐름 | 황제낙엽 | 2008.09.18 | 36 |
27 | URL 리다이렉트 (redirect) | 황제낙엽 | 2008.04.18 | 32 |
26 | 감추기, 보이기 화면 예제 | 황제낙엽 | 2008.04.14 | 21 |
25 | Date객체 - 날짜구하기 | 황제낙엽 | 2008.02.19 | 24 |
24 | JavaScript TDD by 강규영 | 황제낙엽 | 2007.11.26 | 31 |
23 | Page Refresh/Reload | 황제낙엽 | 2007.08.24 | 197 |
22 | Javascript 내장객체 String | 황제낙엽 | 2007.04.10 | 392 |
21 | 유용한 자바스크립트 예제 몇가지 (Tree 및...) | 황제낙엽 | 2005.10.20 | 26 |
20 | SelectBox 밑에 CheckBox가 포함된 리스트 만들기 | 황제낙엽 | 2007.01.16 | 178 |
19 | 3시간 걸려서 만든 입력폼 자릿수체크 스크립트 | 황제낙엽 | 2006.04.22 | 48 |
18 | innerHTML | 황제낙엽 | 2005.12.19 | 67 |
17 | insertAdjacentHTML Method | 황제낙엽 | 2005.12.19 | 50 |
16 | 폼으로 XML 데이터 전송 (JSP+Javascript) | 황제낙엽 | 2005.12.04 | 43 |
15 | Methods and properties of Microsoft.XMLDOM | 황제낙엽 | 2005.12.04 | 39 |
14 | 슬라이딩 메뉴 | 황제낙엽 | 2005.12.02 | 18 |
13 | XML+JS 연동 다중셀렉트박스 (1) - <font color="brown">(MS Explorer 전용)</brown> | 황제낙엽 | 2005.12.02 | 23 |
12 | 풍선 도움말 | 황제낙엽 | 2005.11.24 | 18 |
11 | 소스 보기 막기 | 황제낙엽 | 2005.11.18 | 168 |