jQuery Mobile 事件
事件 = 所有不同訪客造訪頁面的回應動作。
jQuery Mobile 事件
在jQuery Mobile你可以使用任何標準的 jQuery 事件 。
除此之外, jQuery Mobile 也提供了針對行動裝置瀏覽器的事件：
觸控事件- 當使用者觸碰螢幕時觸發
滑動事件- 當使用者上下滑動時觸發
定位事件- 當裝置水平或垂直翻轉時觸發
頁面事件- 當頁面顯示，隱藏，創建，加載或未加載時觸發
#初始化jQuery Mobile 事件
在學習jQuery時我們學到了用$(document).ready()讓你的jQuery程式碼腳本在DOM元素載入完成後才開始執行：
實例
<!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 中, 使用pageinit 事件來設定程式碼腳本在DOM元素載入完成後開始執行，所以要在任何新頁面載入並建立是執行腳本，就需要綁定pageinit事件。
第二個參數("#pageone")為指定事件的頁面id：
實例
##<!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>執行實例»點擊"運行實例"按鈕查看線上實例
#實例
運行實例»點擊"運行實例"按鈕查看線上實例
<!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>運行實例»點擊"運行實例"按鈕查看線上實例
#實例
運行實例»點擊"運行實例" 按鈕查看線上實例
<!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>運行實例»點擊"運行實例" 按鈕查看線上實例
| 注意： jQuery on() 方法用於綁定事件到選取的元素上。 |
