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
번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
---|---|---|---|---|
106 | HTTP 접근 제어 (CORS) | 황제낙엽 | 2017.05.29 | 472 |
105 | innerHTML | 황제낙엽 | 2008.11.03 | 472 |
104 | Understanding delete | 황제낙엽 | 2011.11.28 | 470 |
103 | javascript replaceall의 방법에 따른 처리 속도 비교 | 황제낙엽 | 2009.02.11 | 469 |
102 | Javascript delete | 황제낙엽 | 2012.06.11 | 468 |
101 |
자바스크립트 타입 비교 테이블 + 테이블 작성 스크립트
[1] ![]() | 황제낙엽 | 2017.06.23 | 467 |
100 | 다양한 WYSIWYG 에디터 | 황제낙엽 | 2011.11.13 | 464 |
99 | Dynatrace For Ajax Performance | 황제낙엽 | 2010.08.18 | 462 |
98 | 라이노 (Rhino) 관련 링크 모음 | 황제낙엽 | 2008.07.21 | 461 |
97 | Top 10 JavaScript Performance Tips+Android & iPhone Engine Testing | 황제낙엽 | 2011.11.04 | 459 |
96 | 숫자값으로의 변환 형태 | 황제낙엽 | 2009.09.02 | 459 |
95 | 자바스크립트 쿠키 | 황제낙엽 | 2009.06.11 | 459 |
94 | 테이블 엘리먼트 생성 스크립트 | 황제낙엽 | 2009.04.07 | 458 |
93 |
YUI Compressor in Java
![]() | 황제낙엽 | 2011.07.04 | 456 |
92 | User Agent 관련 Reference URL | 황제낙엽 | 2011.02.22 | 456 |
91 | 소숫점을 포함한 반올림 | 황제낙엽 | 2008.12.11 | 454 |
90 | 3시간 걸려서 만든 입력폼 자릿수체크 스크립트 | 황제낙엽 | 2006.04.22 | 453 |
89 | 자바스크립트 예약어 | 황제낙엽 | 2010.11.03 | 452 |
88 | XMLHttpRequest.setRequestHeader | 황제낙엽 | 2013.09.30 | 451 |
87 | 상속과 Super 로의 접근 | 황제낙엽 | 2012.09.18 | 451 |