HTML5与移动Web：jQueryMobile事件

Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解

bind()

是直接绑定在元素上，新添加的元素没有被绑定事件；.bind()方法将事件类型和一个事件处理函数直接注册到了被选中的DOM元素中，它不仅在所有匹配的元素中隐含地迭代附加事件处理函数，而且这些操作非常多余，因为这些相同的事件处理函数是被一遍一遍的重复的添加到所有匹配的标签上。

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

live()

是通过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到document DOM节点上。和.bind()的优势是支持动态数据。.live()方法将与事件处理函数关联的选择器和事件信息一起附加到文档的根级元素（即document）。通过将事件信息注册到document上，这个事件处理函数将允许所有冒泡到document的事件调用它（例如委托型、传播型事件）。一旦有一个事件冒泡到document元素上，Jquery会根据选择器或者事件的元数据来决定哪一个事件处理函数应该被调用，如果这个事件处理函数存在的话。支持动态

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

delegate()

是更精确的小范围使用事件代理，性能优于.live()；.delegate()方法与live()方式实现方式相类似，它不是将选择器或者事件信息附加到document，而是让你指定附加的元素

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

on()

是最新的1.9版本整合了之前的三种方式的新事件绑定机制

过渡事件

页面过渡涉及两个页面：一张"来"的页面和一张"去"的页面 - 这些过渡使当前活动页面（"来的"页面）到新页面（"去的"页面的改变过程变得更加动感。

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>

页面加载事件

页面加载事件属于外部页面

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

页面初始化事件

三个阶段：在页面创建前，页面创建，页面初始化

pagebeforecreate	当页面即将初始化，并且在 jQuery Mobile 开始增强页面之前，触发该事件。
pagecreate	当页面已创建，但增强完成之前，触发该事件。
pageinit	当页面已初始化，并且在 jQuery Mobile 已完成页面增强之后，触发该事件。

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

轻击事件

用户完成一次快速完整的轻击页面屏幕时触发

tap事件和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);
	});
});

滑动事件

swipe	用户在1秒内水平拖拽屏幕距离大于30px或垂直拖拽屏幕距离小于20px时触发
swipeleft	用户向左侧滑动屏幕时触发该事件
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 &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>

屏幕滚动事件

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

燕双嘤

发布了349 篇原创文章 · 获赞 161 · 访问量 19万+

他的留言板关注

HTML5与移动Web：jQueryMobile事件

Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解

过渡事件

页面加载事件

页面初始化事件

轻击事件

滑动事件

屏幕滚动事件

翻转事件

猜你喜欢