Home Back

egovframework

Events

전자정부 모바일 표준프레임워크는 스마트기반 모바일 환경에 적합한 이벤트를 제공한다. Touch, Mouse, Window 영역의 다양한 이벤트를 지원가능 여부에 따라 선택적으로 이용하기 때문에 모바일 환경과 데스크톱(Desktop) 환경 모두에서 사용 가능하다. live() 또는 bind() 메소드를 이용하여 여러 이벤트를 함께 사용 할 수 있다.
아래 이벤트는 pageCreate()에 .on() 또는 .bind() 해야 사용 할 수 있다.

Touch Events

tap
Touch 이벤트가 끝나는 즉시 발생하는 이벤트이다.
taphold
tap을 일정 시간 이상 지속했을 때 발생하는 이벤트이다.
swipe
1초 이내에 30px이상의 수평 방향이나 20px 이상의 수직 방향으로 드래그(drag)되면 발생하는 이벤트이다.
swipeleft
swipe 이벤트가 왼쪽으로 일어났을 때 발생하는 이벤트이다.
swiperight
swipe 이벤트가 오른쪽으로 일어났을 때 발생하는 이벤트이다.

Orientation change event

orientationchange
기기의 방향이 수평 또는 수직으로 바뀌었을 때 발생하는 이벤트이다. orientationChange 이벤트가 지원되지 않을 경우에는 resize 이벤트가 자동으로 bind 된다.

Scroll events

scrollstart
스크롤(scroll)이 시작되면 발생하는 이벤트이다. (iOS 기기는 스크롤 중에는 DOM 을 변경하지 않고 queue 에 저장해두었다가 스크롤이 끝난 후에 변경한다.)
scrollstop
스크롤이 끝나면 발생하는 이벤트이다.

Page load events

페이지 로딩에 관련된 이벤트들로서, 페이지를 로딩하기 전(pagebeforeload)과 정상적으로 로딩이 완료된 후(pageload), 로딩 작업이 실패한 경우(pageloadfailed) 이벤트가 발생한다.

pagebeforeload
페이지 로딩이 일어나기 전에 발생하는 이벤트이다.
pageload
페이지 로딩이 성공한 경우(DOM에 정상적으로 통합된 경우)에 발생하는 이벤트이다.
pageloadfailed
페이지 로딩이 실패한 경우(DOM에 정상적으로 통합되지 못한 경우)에 발생하는 이벤트이다.

최초 페이지가 로드될 때 페이지 이벤트에 관련된 핸들러를 사용하기 위해서는 참조된 Javascript 가 실행되기 전에 bind 시켜야 한다. Global Configuration 에서 설명한 것처럼 pageinit 핸들러를 이용하면 이와 같은 설정을 할 수 있다.

Page change events

페이지 이동에 관련된 이벤트들로서, 이동 대상 페이지가 보여지기 전(pagebeforechange)과 정상적으로 로딩된 후 애니메이션을 포함한 페이지 이동까지 정상적으로 완료되었을 때(pagechange), 대상 페이지를 로딩하지 못했거나 페이지 이동이 정상적으로 완료되지 않은 경우(pagechangefailed) 이벤트가 발생한다.

pagebeforechange
대상 페이지로 이동하는 애니메이션이 보여지기 전에 발생하는 이벤트이다.
pagechange
대상 페이지가 정상적으로 로딩된 후에 애니메이션을 포함한 페이지 이동까지 정상적으로 완료된 경우 발생하는 이벤트이다.
pagechangefailed
대상 페이지를 로딩하지 못했거나 페이지 이동이 정상적으로 완료되지 않았을 때 발생하는 이벤트이다.

최초 페이지가 로드될 때 페이지 이벤트에 관련된 핸들러를 사용하기 위해서는 참조된 Javascript 가 실행되기 전에 bind 시켜야 한다. Global Configuration 에서 설명한 것처럼 pageinit 핸들러를 이용하면 이와 같은 설정을 할 수 있다.

Page transition events

페이지가 나타나기 이전(pagebeforeshow)과 나타난 순간(pageshow), 가려지기 이전(pagebeforehide)과 가려진 순간(pagehide) 페이지 이벤트가 발생한다.

pagebeforeshow
화면전환이 일어나기 전, 또는 페이지가 보여지기 전에 매번 발생하는 이벤트이다.
pagebeforehide
화면전환이 일어나기 전, 또는 페이지가 숨겨지기 전에 매번 발생하는 이벤트이다.
pageshow
화면전환이 완료되었거나 페이지가 보여진 후에 매번 발생하는 이벤트이다.
pagehide
화면전환이 완료되었거나 페이지가 가려진 후에 매번 발생하는 이벤트이다.
페이지 이벤트는 이전 페이지와 다음 페이지의 존재 유무와 이벤트 종류에 따라 이전 페이지(prevPage)와 다음페이지(nextPage)에 대한 정보를 갖는다. (첫 번째 페이지는 이전 페이지에 대한 정보가 없기 때문에 null 객체를 참조한다.)

최초 페이지가 로드될 때 페이지 이벤트에 관련된 핸들러를 사용하기 위해서는 참조된 Javascript 가 실행되기 전에 bind 시켜야 한다. Global Configuration 에서 설명한 것처럼 pageinit 핸들러를 이용하면 이와 같은 설정을 할 수 있다.

Page initialization events

페이지 초기화에 관련된 이벤트들로서, 페이지 초기화가 발생하기 전(pagebeforecreate)과 DOM 객체가 생성되고 data-role="page"가 초기화 되기 이전(pagecreate), 페이지 초기화가 완료된 이후(pageinit) 이벤트가 발생한다.

pagebeforecreate
페이지 초기화가 동작하기 이전에 발생하는 이벤트이다.
pagecreate
페이지 초기화의 중간(DOM객체가 생성되고 data-role="page"가 초기화되기 이전)에 발생하는 이벤트이다.
pageinit
페이지 초기화가 완료된 이후(DOM객체가 생성된 후 모든 요소들의 스타일이 적용된 이후)에 발생하는 이벤트이다.

최초 페이지가 로드될 때 페이지 이벤트에 관련된 핸들러를 사용하기 위해서는 참조된 Javascript 가 실행되기 전에 bind 시켜야 한다. Global Configuration 에서 설명한 것처럼 pageinit 핸들러를 이용하면 이와 같은 설정을 할 수 있다.

Page remove events

페이지 제거에 관련된 이벤트들로서, 로딩했던 외부 페이지 중 활성화되지 않는 페이지를 DOM에서 삭제하기 위한(pageremove) 이벤트가 발생한다.

pageremove
페이지의 링크 태그에 external-page="true" 속성을 추가함으로서, 외부페이지로 이동 후 다시 돌아올 때 외부페이지가 제거되면서 이벤트가 발생한다.

최초 페이지가 로드될 때 페이지 이벤트에 관련된 핸들러를 사용하기 위해서는 참조된 Javascript 가 실행되기 전에 bind 시켜야 한다. Global Configuration 에서 설명한 것처럼 pageinit 핸들러를 이용하면 이와 같은 설정을 할 수 있다.

Virtual mouse events

마우스와 터치 이벤트을 둘다 인식 할 수 있는 virtual click을 제공한다.이는 기존 웹브라우저 환경에서 발생하는 기본 마우스 이벤트( mousedown, mousemove, mouseup, click)가 모바일 환경에서도 지원이 되며 동일 자원에 다중 이벤트가 발생할 시 각각 다른 이벤트로 인식한다.

vmouseover
터치 이벤트 또는 mouseover가 발생할 때 나타나는 이벤트이다.
vmouseout
터치 이벤트 또는 mouseout이 발생할 때 나타나는 이벤트이다.
vmousedown
터치 이벤트 또는 mousedown이 발생할 때 나타나는 이벤트이다.
vmousemove
터치 이벤트 또는 mousemove가 발생할 때 나타나는 이벤트이다.
vmouseup
터치 이벤트 또는 mouseup이 발생할 때 나타나는 이벤트이다.
vclick
터치 이벤트 또는 click이 발생할 때 나타나는 이벤트이다.
vmousecancel
터치 이벤트 또는 mousecancel가 발생할 때 나타나는 이벤트이다.

Layout Events

컴포넌트들이 프레임워크 안에서 동적으로 추가 혹은 보여지거나 숨겨지는 경우에 주위의 컴포넌트들이 다시 그들의 size나 position이 변경되어야 할 경우에 발생시킬 수 있는 이벤트이다.

updatelayout
컴포넌트의 위치 혹은 크기 속성을 동적으로 변경한 경우에 layout을 새롭게 구성하기 위한 이벤트이다.

Animation Events

CSS 전환에 적용되는 class를 추가하거나 삭제하는 animationComplete 플러그인을 지원한다.

Copyright(c)2012 Ministry of Government Administration and Home Affairs.