jQueryの.bind（）における差（）、。）（ライブ、。デリゲート（）と詳細.on
練る（）
直接新しく追加された要素がイベントを結合されていない要素に結合され、イベントタイプ、イベントハンドラの.bind（）メソッドは、選択されたDOM要素に直接登録されている、それだけでなく、すべてのマッチした要素に内在します同じイベントハンドラが一致するすべてのタグが何度も繰り返している複製するために追加されるので、繰り返し、追加のイベントハンドラを含む、これらの操作は不必要です。
$( "#members li a" ).on( "click", function( e ) {} );
$( "#members li a" ).bind( "click", function( e ) {} );
住む（）
これは、バブリングによって要素と結合することです。ドキュメントのDOMノードにバインドされた、より適切なリスト型、。そして.bind（）の利点は、動的データをサポートすることです。イベントおよび文書（即ち、ドキュメント）のルートレベル要素と選択されたイベント情報との相関関数を処理する追加の.live（）メソッド。文書にイベント情報を登録することにより、イベントハンドラは、ドキュメントにすべてのイベントバブルをアップできるようになります（例えば、デリゲート、普及型イベント）それを呼び出します。文書要素にバブリングイベントと、jQueryがイベントハンドラがメタデータセレクタまたはイベントに基づいて存在する場合、起動すべきイベントハンドラを決定するために使用されるであろう。ダイナミックサポート
$( document ).on( "click", "#members li a", function( e ) {} );
$( "#members li a" ).live( "click", function( e ) {} );
デリゲート（）
より正確なプロキシイベント小規模な使用は、パフォーマンスが）（.liveよりも優れている、である;。デリゲート（）それは、セレクタやイベント情報が文書に添付されているではありませんが、ユーザーが指定できるようにする方法に類似のライブ（）方式を用いる方法追加要素
$( "#members" ).on( "click", "li a", function( e ) {} );
$( "#members" ).delegate( "li a", "click", function( e ) {} );
オン（）
前に最新バージョン1.9を統合する3つの方法があり、新たなイベントバインディングメカニズムであります
遷移イベント
ページ遷移が2つのページを伴い：ページ「に」とページ「行く」 - 新しいページへ（ページ「来る」）これらの遷移は、現在アクティブなページを作成（変更プロセスがページになり、「に行きます」よりダイナミックな。
| pagebeforeshow | ページの表示には、イベントの前に、ページが進行中の実際のハンドオーバの前に表示されたときにトリガ |
| pagebeforehide | 隠されたページ進行中の実際のハンドオーバの前にトリガしたイベントの前に隠すページ、 |
| pageshowの | ページ切り替えが完了すると、ページ表示完了イベントがトリガされます |
| pagehide | ページを隠すを完了する隠すページの完全なイベントが発生します |
<script>
$('div').bind('pagebeforehide', function(event, ui) {
console.log('1. ' + ui.nextPage + ' 正在显示中... ');
});
$('div').bind('pagebeforeshow', function(event, ui) {
console.log('2. ' + ui.prevPage + ' 正在隐藏中... ');
});
$('div').bind('pagehide', function(event, ui) {
console.log('3. ' + ui.nextPage+ ' 显示完成！ ');
});
$('div').bind('pageshow', function(event, ui) {
console.log('4. ' + ui.prevPage + ' 隐藏完成！ ');
})
</script>ページロードイベント
ページのloadイベントは、外部のページに属し
<script>
$(document).on("pagecontainerload", function(event, data) {
alert("pagecontainerload 事件触发!\nURL: " + data.url);
});
$(document).on("pagecontainerloadfailed", function(event, data) {
alert("抱歉，被请求页面不存在。");
});
</script>ページの初期化イベント
ページが作成される前に、ページを作成し、ページの初期化：スリーステージ
| pagebeforecreate | ページがある場合にはおよそ初期化する、とjQueryモバイル強化ページの開始前に、イベントがトリガされます。 |
| pagecreate | ページが作成された場合には、しかし、強化が完了する前に、トリガイベント。 |
| pageinit | ページが初期化されている場合はjQueryのモバイル強化ページが完了した後、および、イベントをトリガします。 |
$(document).on("pagebeforecreate", function() {
console.log("pagebeforecreate 事件触发 - 页面即将初始化。jQuery Mobile 还未增强页面");
});
$(document).on("pagecreate", function() {
console.log("pagecreate 事件触发 - 页面已经创建，但还未增强完成");
});
$(document).on("pageinit", function() {
console.log("pagecreate 事件触发 - 页面已经创建，已增强");
});タップイベント
ユーザーは、ページ全体のスクリーンタップを迅速に完了したことをトリガーすると
タップイベントとtaploadイベントはdocument.ready（）関数またはイベントpageinit内に結合されなければなりません
$(document).on("pageinit", function() {
$("#home").on('tap', '#image', function(event, ui) {
var tapCaption = $(this).data("tap");
$("#caption").addClass("comment").html(tapCaption);
});
$("#home").on('taphold', '#caption', function(event, ui) {
var tapholdCaption = $(this).data("appTaphold");
$(this).html(tapholdCaption);
});
});スリップイベント
| スワイプ | ユーザは、水平方向または垂直方向の距離がドラッグ30pxスクリーン距離が少ないトリガー20ピクセルよりもよりも大きい一つの第二の画面にドラッグ |
| 左スワイプ | このイベントは、ユーザが画面左側にスライドするときにトリガーされます |
| swiperight | ユーザーが右方向に画面をスライドさせるときに、このイベントがトリガされます |
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>通过滑动屏幕浏览图片</title>
<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">
<!-- 引入 jQuery 库 -->
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- 引入 jQuery Mobile 库 -->
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
* {
margin: 0px;
padding: 0px;
}
.ifrswipt {
position: relative;
height: 470px;
margin: 0 auto;
}
.ifrswipt ul {
position: absolute;
width: 3000px;
overflow: hidden;
top: 0px;
left: 0px;
}
.ifrswipt li {
list-style-type: none;
display: inline-block;
float: left;
position: relative;
margin: 0px 8px 0px 7px;
}
.imgswipt{
cursor: pointer;
border: solid 5px #FFF;
}
</style>
</head>
<body>
<div id="page1" data-role="page" data-theme="b">
<div data-role="header" data-position="fixed">
<h1>平面设计作品欣赏</h1>
</div>
<div data-role="content">
<div class="ifrswipt">
<ul id="ifrswipt">
<li><img src="images/182401.jpg" alt="" class="imgswipt"></li>
<li><img src="images/182402.jpg" alt="" class="imgswipt"></li>
<li><img src="images/182403.jpg" alt="" class="imgswipt"></li>
<li><img src="images/182404.jpg" alt="" class="imgswipt"></li>
<li><img src="images/182405.jpg" alt="" class="imgswipt"></li>
<li><img src="images/182406.jpg" alt="" class="imgswipt"></li>
</ul>
</div>
</div>
<div data-role="footer" data-position="fixed">
<h4>CopyRight © 2017 设计工作室</h4>
</div>
</div>
<script type="text/javascript">
// 全局命名空间
var swiptimg = {
$index: 0,
$width: 352,
$swipt: 0,
$legth: 6
}
var $imgul = $("#ifrswipt");
$(".imgswipt").each(function() {
$(this).swipeleft(function() {
if (swiptimg.$index < swiptimg.$legth) {
swiptimg.$swipt = -swiptimg.$index * swiptimg.$width;
swiptimg.$index++;
$imgul.animate({
left: swiptimg.$swipt
}, "slow");
}
}).swiperight(function() {
if (swiptimg.$index > 0) {
swiptimg.$index--;
swiptimg.$swipt = -swiptimg.$index * swiptimg.$width;
$imgul.animate({
left: swiptimg.$swipt
}, "slow");
}
})
})
</script>
</body>
</html>
画面のスクロールイベント
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<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">
<!-- 引入 jQuery 库 -->
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- 引入 jQuery Mobile 库 -->
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
body {
background-image: url(images/2.jpg);
}
h2 {
height: 600px;
color: blue;
font-size: 30px;
text-align: center;
-webkit-text-shadow: 4px 4px 4px #938484;
text-shadow: 4px 4px 4px #938484;
}
</style>
</head>
<body>
<div data-role="page" id="page">
<script>
$('div[data-role="page"]').on('pageinit', function(event, ui) {
var div = $('div[data-role="content"]');
var h2 = $('h2');
$(window).on('scrollstart', function() {
h2.text("开始滚动屏幕").css("color", "red");
div.css('background-image', 'url(images/3.jpg)');
})
$(window).on('scrollstop', function() {
h2.text("停止滚动屏幕").css("color", "blue");
div.css('background-image', 'url(images/4.jpg)');
})
})
</script>
<div data-role="header">
<h1>标题</h1>
</div>
<div data-role="content">
<h2>内容</h2>
</div>
<div data-role="footer" class="ui-footer-fixed">
<h4>脚注</h4>
</div>
</div>
</body>
</html>
フリップのイベント
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>判断移动设备手持方向</title>
<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">
<!-- 引入 jQuery 库 -->
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- 引入 jQuery Mobile 库 -->
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
$(document).on("pageinit",function(event){
$(window).on("orientationchange",function(event){
if(event.orientation=="landscape") { //判断当前屏幕方向是否是水平方向
$("#msg").text("现在是水平模式！"); //为元素赋予文本内容
$("#page1").css("background-color","#004485"); //改变元素背景颜色
$("#page1").css("color","#CCFFFF"); //改变元素文本颜色
}
if(event.orientation=="portrait") { //判断当前屏幕方向是否是垂直方向
$("#msg").text("现在是垂直模式！"); //为元素赋予文本内容
$("#page1").css("background-color","#F4F4F4"); //改变元素背景颜色
$("#page1").css("color","#333"); //改变元素文本颜色
}
});
})
</script>
<style>
* {
margin: 0px;
padding: 0px;
}
#page1 {
background-color: #F4F4F4;
color: #333;
text-shadow: none;
}
.bar01 {
background-color: #fff !important;
font-size: 0.8em !important;
}
#btn {
position: absolute;
width: 2em;
height: 1.25em;
left: 1em;
top: 2em;
}
.ui-content {
margin: 0px;
padding: 0px;
}
#banner {
width: 100%;
height: auto;
overflow: hidden;
}
#banner img {
width: 100%;
height: auto;
}
#main {
padding: 1em;
height: auto;
overflow: hidden;
font-family: 微软雅黑;
font-size: 1em;
}
#main h3 {
font-size: 1.2em;
}
#main p {
text-indent: 2em;
padding: 1em 0 1em 0;
}
#msg {
display: block;
text-align: center;
background-color: rgba(0,0,0,0.4);
font-size: 1em;
color: #FFF;
line-height: 1.5em;
margin: 1em 0;
}
</style>
</head>
<body>
<div id="page1" data-role="page">
<div data-role="header" class="bar01">
<div id="btn"><img src="images/182502.png" alt=""></div>
<h1><img src="images/182501.png" alt=""></h1>
</div>
<div data-role="content">
<div id="msg"></div>
<div id="banner"><img src="images/182503.jpg" alt=""></div>
<div id="main">
<h3>关于我们</h3>
<p>我们是专业从事互联网相关业务开发的设计工作室。专门提供全方位的优质服务和最专业的网站建设方案为企业打造全新电子商务平台。本工作室成立于1999年，已经成为国内著名的网站建设提供商。八年的风雨历程已成功的为中国教育部、中国文化部、国有资监督管理委员会......</p>
<h3>我们的团队</h3>
<p>成员都具有多年的实际设计工作经验，更好的满足客户的国际化需求。设计师由正规美院毕业，创意的思维模式，高超的设计技能，为您提供最适合您的设计方案。</p>
<h3>我们的承诺</h3>
<p>本工作室设计与制作的网站均属原创、不套用网上的任何模板，根据每个公司的行点，设计出属于客户.....</p>
<p><em>更多>></em></p>
</div>
</div>
<div data-role="footer" class="bar01"><h4>CopyRight © 2017 设计工作室</h4></div>
</div>
</body>
</html>
