jQuery 모바일 이벤트
이벤트 = 페이지의 모든 방문자에 대한 응답 작업입니다.
jQuery 모바일 이벤트
jQuery Mobile에서는 모든 표준 jQuery 이벤트를 사용할 수 있습니다.
또한 jQuery Mobile은 모바일 브라우저용 이벤트도 제공합니다.
터치 이벤트 - 사용자가 화면을 터치할 때 트리거됨
슬라이딩 이벤트 - 사용자가 위아래로 슬라이드할 때 트리거됨
위치 지정 이벤트 - 기기가 가로 또는 세로로 뒤집힐 때 발생
페이지 이벤트 - 페이지가 표시되거나, 숨겨지거나, 생성되거나, 로드되거나 로드되지 않을 때 발생
jQuery 모바일 이벤트 초기화
jQuery를 배우면서 배웠습니다. $( document).ready()를 사용하여 DOM 요소가 로드된 후 jQuery 코드 스크립트가 실행되기 시작합니다.
Example
<!DOCTYPE html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").on("click",function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>如果您点击我，我会消失。</p>
<p>点击我，我会消失。</p>
<p>点击我，我也会消失。</p>
</body>
</html>예제 실행»
온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요.
그러나 jQuery Mobile에서는 DOM 요소가 로드된 후 실행을 시작하도록 코드 스크립트를 설정하는 데 pageinit 이벤트가 사용되므로 새 페이지에서 실행 스크립트를 로드하고 생성하려면 pageinit 이벤트를 바인딩해야 합니다.
두 번째 매개변수("#pageone")는 지정된 이벤트의 페이지 ID입니다.
Instance
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagecreate","#pageone",function(){
$("p").on("click",function(){
$(this).hide();
});
});
</script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>页眉文本</h1>
</div>
<div data-role="main" class="ui-content">
<p>如果您点击我，我会消失。</p>
<p>点击我，我会消失。</p>
<p>点击我，我也会消失。</p>
</div>
<div data-role="footer">
<h1>页脚文本</h1>
</div>
</div>
</body>
</html>Run Instance»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
stance instance ance<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagecreate","#pageone",function(){
$("p").on("click",function(){
$(this).hide();
});
});
</script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>页眉文本</h1>
</div>
<div data-role="main" class="ui-content">
<p>如果您点击我，我会消失。</p>
<p>点击我，我会消失。</p>
<p>点击我，我也会消失。</p>
</div>
<div data-role="footer">
<h1>页脚文本</h1>
</div>
</div>
</body>
</html> instance
run 인스턴스» "run instance"버튼을 클릭하십시오. 온라인 인스턴스를 보려면
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagecreate","#pageone",function(){
$("p").on("click",function(){
$(this).hide();
});
});
</script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>页眉文本</h1>
</div>
<div data-role="main" class="ui-content">
<p>如果您点击我，我会消失。</p>
<p>点击我，我会消失。</p>
<p>点击我，我也会消失。</p>
</div>
<div data-role="footer">
<h1>页脚文本</h1>
</div>
</div>
</body>
</html>run 인스턴스» "run instance"버튼을 클릭하십시오. 온라인 인스턴스를 보려면
| 참고: | jQuery on() 메서드는 선택한 요소에 이벤트를 바인딩하는 데 사용됩니다.
|---|
