virtual event들을 사용하는 이유는 HTML element를 trigger 할 수 있는 손가락이나 mouse 와 관련된 이벤트들을 표준화 하기 위해서 입니다. 이러한 이벤트들은 서로 다른 이름들을 가지고 있습니다. (eg touchstart and
click for click type events, or touchmove and mousemove
to move type events) jQuery Mobile 은 virtual events라고 하는 것을 만들어서 이러한 이벤트들의 이름을 표준화 했습니다.
Virtual events
|
Name |
Signification |
|
vclick |
Idem click. Warning: jQuery Mobile developers recommend not to use the vclick event when it produces a change in the display (eg click on a link that shows a new window), because the vclick event is sometimes triggered two times - instead of one - when set on a particular element. In these cases, they recommend using click instead. Apart from these elements that can cause problems, we will use vclick. |
|
vmousemove |
Idem mousemove. |
|
vmouseover |
Idem mouseover. |
|
vmousedown |
Idem mousedown. |
|
vmouseup |
Idem mouseup. |
|
vmouseout |
Idem mouseout. |
|
vmousecancel |
Idem mousecancel. |
아래 예제는 윈도우에서 어떤 이벤트가 발생 했을 때 그 이벤트의 이름을 화면에 보여 줍니다.
Detect and display the virtual events
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel=stylesheet href=jquery.mobile/jquery.mobile.css />
<script src=jquery.js></script>
<script src=jquery.mobile/jquery.mobile.js></script>
</head>
<body>
<div id=home data-role=page id=home>
<div data-role=header>
<h1>Home</h1>
</div>
<div data-role=content>
<p> Events </p>
</div>
</div>
</body>
</html>
<script>
var $content = $("#home div:jqmData(role=content)");
$("#home").bind ("vmouseover", function (event)
{
$content.append (event.type + ", ");
});
$("#home").bind ("vmousedown", function (event)
{
$content.append (event.type + ", ");
});
$("#home").bind ("vmousemove", function (event)
{
$content.append (event.type + ", ");
});
$("#home").bind ("vmouseup", function (event)
{
$content.append (event.type + ", ");
});
$("#home").bind ("vclick", function (event)
{
$content.append (event.type + ", ");
});
$("#home").bind ("vmouseout", function (event)
{
$content.append (event.type + ", ");
});
$("#home").bind ("vmousecancel", function (event)
{
$content.append (event.type + ", ");
});
</script>
convention04.html'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| 컴포넌트에 메소드 추가하기 (0) | 2012.10.04 |
|---|---|
| Ajax 로 컴포넌트 사용하기 (0) | 2012.10.03 |
| 컴포넌트에 파라미터 전달하기 (0) | 2012.10.03 |
| 컴포넌트 생성 여부 체크하는 방법 (0) | 2012.10.03 |
| 나만의 jQuery Mobile 컴포넌트 만들기 (0) | 2012.10.02 |
| 네임 스페이스 사용하기 (0) | 2012.09.30 |
| Configuration Options (0) | 2012.09.29 |
| mobileinit 이벤트가 triggering 되는 시기 알아보기 (0) | 2012.09.29 |
| Property 들 출력하기 (JQM + Javascript Programming) (0) | 2012.09.27 |
| JQuery Mobile - Layout Grid (Columns) (0) | 2012.08.22 |