HTML5 and Mobile Web: jQueryMobile event

The difference between () in jQuery .bind () ,. live () ,. delegate () and Detailed .on

bind()

Is directly bound to the elements, the newly added element is not binding event; .bind () method of the event type and an event handler is registered directly to the selected DOM element, it is not only implicit in all matched elements iteratively containing additional event handlers, and these operations is superfluous, because the same event handler is added to duplicate all matching tags are over and over again.

$( "#members li a" ).on( "click", function( e ) {} );
$( "#members li a" ).bind( "click", function( e ) {} );

 live()

It is to bind to the elements by way of bubbling. More suitable list type, bound to the document DOM node. And .bind () advantage is to support dynamic data. Additional .live () method of processing the correlation function with the event and the event information selected with the root level element of the document (i.e., document). By registering the event information to the document, the event handler will allow all events bubble up to document calls it (eg delegate, spread-type events). Once an event bubbling to the document element, Jquery will be used to determine which event handler should be invoked, if the event handler exists based on the metadata selector or events. Dynamic Support

$( document ).on( "click", "#members li a", function( e ) {} );
$( "#members li a" ).live( "click", function( e ) {} );

delegate()

Is a more accurate proxy event small-scale use, performance is better than .live () ;. delegate () method with the live () manner similar to the way that it is not the selector or event information is appended to the document, but to let you specify additional elements

$( "#members" ).on( "click", "li a", function( e ) {} );
$( "#members" ).delegate( "li a", "click", function( e ) {} );

on()

Is a new event binding mechanism are three ways of integrating the latest 1.9 version before

Transition event

Page transitions involve two pages: a "to" page and a "go" pages - these transitions make the currently active page ( "come" page) to a new page ( "go to" change process becomes page more dynamic.

pagebeforeshow	Page display before the event, triggered when the page is displayed before the actual handover in progress
pagebeforehide	Hide page before the event, triggered when a hidden page before the actual handover in progress
pageshow	Page display completion event is triggered when the page switching is completed
pagehide	Hide page complete event fires when the page is completed Hide

<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>

Page load event

Page load event belongs to an external page

<script>
	$(document).on("pagecontainerload", function(event, data) {
	    alert("pagecontainerload 事件触发!\nURL: " + data.url);
	});
	$(document).on("pagecontainerloadfailed", function(event, data) {
		alert("抱歉，被请求页面不存在。");
	});
</script>

Page initialization events

Three stages: before the page is created, create a page, the page initialization

pagebeforecreate	When the page is about to initialize, and before the start of jQuery Mobile enhanced page, the event is triggered.
pagecreate	When the page has been created, but before enhancement is complete, the trigger event.
pageinit	When the page has been initialized, and after jQuery Mobile enhanced page has been completed, triggering the event.

$(document).on("pagebeforecreate", function() {
	console.log("pagebeforecreate 事件触发 - 页面即将初始化。jQuery Mobile 还未增强页面");
});
$(document).on("pagecreate", function() {
	console.log("pagecreate 事件触发 - 页面已经创建，但还未增强完成");
});
$(document).on("pageinit", function() {
	console.log("pagecreate 事件触发 - 页面已经创建，已增强");
});

Tap event

When the user triggers a quick completion of a full page screen tap

tap events and tapload events must be bound within document.ready () function or event 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);
	});
});

Slip events

swipe	The user dragged in one second screen horizontal or vertical distance is greater than the drag 30px screen distance is less than the trigger 20px
swipeleft	This event is triggered when a user to slide the screen left side
swiperight	This event is triggered when a user to slide the screen to the right

<!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 &copy; 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>

Screen scroll event

<!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>

Flip events

<!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 &copy; 2017 设计工作室</h4></div>
</div>
</body>
</html>