Web前端开发学习之路——JQuery Mobile事件

所谓“事件”（Event）是指用户执行某种操作时所出发的过程，例如，当用户单击按钮时会触发按钮的单击（Click）事件；用户滑动屏幕时会触发滑动事件等。我们在编写程序时，很容易根据用户执行的操作来影响这些事件。本章我们就来旷课jQuery Mobile提供了哪些事件。

页面事件

初始化事件（Page Initialization）:分别在页面初始在之前，页面创建时以及页面初始化之后触发事件
外部页面加载事件（Page Load）:外部页面加载时触发事件
页面切换事件（Page Transition）:页面切换时出发事件

操作事件的方式很简单，只要使用jQuery提供的on()方法指定要触发的事件并设定事件处理函数就可以了，语法如下:

$(document).on(事件名称,选择器,事件处理函数);

其中“选择器”可以省略，表示事件应用于整个页面而不限定哪一个组件

初始化事件

Mobileinit

当jQuery Mobile开始执行时，回西安出发mobileinit事件。想要更改jQuery Mobile默认的设置时，就可以将函数绑定到mobileinit事件。这样，jQueryMobile就会以mobileinit事件的设置值来取代原来的设置，语法如下:

$(document).on("mobileinit",function(){
//程序语句
});

上述语法使用jQuery的on()方法来绑定mobileinit事件，并设置事件处理函数。举例来说，jQueryMobile默认任何操作都会使用Ajax的方式，如果不想使用Ajax，就可以在mobileinit事件中将$.mobile.ajaxEnabled更改为false,如下图所示：

$(document).on('mobileinit',function(){
$.mobile.ajaxEnabled-false;
});

要特别注意的是mobileinit的绑定事件要放在引入jquery.mobile.js之前

Pagebeforecreate、Pagecreate、Pageinit

这3个事件都是在初始化前后触发的，Pagebeforecreate会在页面DOM加载后，正在初始化时触发；Pagecreate是当前页面的DOM加载完成，初始化也完成时触发;Pageinit是在页面初始化之后触发的，语法如下：

$(document).on("pagebeforecreate",function(){
//程序语句
});

//例如
$(document).on("pagebeforecreate",function(){
alert("pagebeforecreate事件被触发了！")
});

在jQuery中判断DOM是否加载成功使用的是$(document).ready()，而jQuery Mobile则可以利用pageinit使劲按进行处理。下面通过具体的范例看执行结果，能够清除看出这3个事件的触发时机。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Mobile初始化事件</title>
    <!--最佳化屏幕宽度-->
    <meta name="viewport" content="width-device-width,initial-scale=1">
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script type="text/javascript">
        $(document).on("pagebeforecreate",function () {
            alert("pagebeforecreate事件被触发了！")
        });
        $(document).on("pagecreate",function () {
            alert("pagecreate事件被触发了！")
        })
        $(document).on("pageinit",function () {
            alert("pageinit事件被触发了！")
        })
    </script>
</head>
<body>
    <!--第一页-->
<div data-role="page" data-title="第一页" id="first" data-theme="a">
    <div data-role="header">
        <a href="#second">按我到第二页</a>
        <h1>jQuery Mobile初始化事件 第一页</h1>
    </div>
    <div data-role="content">
        初始化事件测试<br>
        这是第一页
    </div>
    <div data-role="footer">
        <h4>页脚</h4>
    </div>
</div>
<!--第二页-->
<div data-role="page" data-title="第二页" id="second" data-theme="b">
    <div data-role="header">
        <a href="#first">返回第一页</a>
        <h1>jQuery Mobile初始化事件 第二页</h1>
    </div>
    <div data-role="content">
        初始化事件测试<br>
        这是第二页
    </div>
    <div data-role="footer">
        <h4>页脚</h4>
    </div>
</div>
</body>
</html>

执行结果如下图：

绑定事件的方法：on()和one()。绑定事件的on()方法也可以改用one()方法代替，区别在于one()执行执行一次。例如，当我们将按钮绑定click(单击鼠标)事件时，on()方法程序代码如下：

$("#btn_on").on('click',function(){
    alert("你单击了on按钮")
});

one()方法程序代码如下：

$("#btn_one").one('click',function(){
    alert("你单击了one按钮")
});

外部页面加载事件

外部页面加载时会触发两个事件，一个是Pagebeforeload，另一个是当页面载入成功时会触发Pageload事件，载入失败时会触发Pageloadfailed事件。

Pageload事件其用法举例如下:

$(document).on("pageload",function(event,data){
    alert("URL:"+data.url);
});

Pageload的处理函数有以下两个参数。

event:任何jQuery的事件属性，例如event.target、event.type、event.pageX等
data:包含以下属性：

url:字符串(string)类型，页面的url地址
absUrl:字符串(string)类型，绝对路径
dataUrl:字符串(string)类型，地址栏的URL
options(object):对象(object)类型，$.mobile.loadPage()指定的选项
xhr:对象(object)类型，XMLHttpRequest对象
textStatus:对象(object)状态或空值(null)，返回状态

Pageloadfailed事件

如果页面加载失败，就会触发pageloadfailed事件，默认会出现Error Loading Page字样，语法如下：

$(document).on("pageloadfailed",function(){
    alert("页面加载失败");
});

页面切换事件

jQuery Mobile切换页面的特效一直时人们很喜欢的功能之一，我们先来看看jQuery Mobile切换页面的语法：

$(":mobile-pagecontainer").pagecontainer("change",to[,options]);

To:想要切换的目的页面，其值必须是字符串或者DOM对象，内部页面可以直接指定DOM对象id名称，例如，要切换到id名称为second的页面，可以写成“#second”；要链接到外部页面，必须以字符串表示，如abc.html
Option(属性)：可以省略不写，其属性如下表

**页面切换事件的属性**
属性	说明
allowSamePageTransition	默认值：false 是否允许切换到当前页面
changeHash	默认值：true 是否更新浏览记录，若将属性设为false，当前页面浏览记录会被清除，用户无法通过“上一页”按钮返回
dataUrl	更新地址栏的URL
loadMsgDeay	加载画面延迟数秒，单位为ms(毫秒)，默认值为50，如果页面再此秒数之前加载完成，就不会显示正在加载中的信息画面
reload	默认值：false 当页面已经再DOM种，是否将页面重新加载
reverse	默认值：false 页面切换效果是否要反向，如果设为true，就像模拟返回上一页的效果
showLoadMsg	默认值：true 是否要显示加载中的信息画面
transition	切换页面时使用的转场动画效果
type	默认值：get 当to的目标是url时，指定HTTP Method使用get或post

其中，transition属性用来指定页面转场动画效果，如飞入、弹出或淡入淡出效果等共6种，如表所示：

transition属性的转场动画效果说明
转场效果	说明
slide	从右到左
slideup	从下到上
slidedown	从上到下
pop	从小点到全屏幕
fade	淡出淡入
flip	2D或3D旋转动画（只有支持3D效果的设备才能使用）

下面请看页面切换的范例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>转场特效</title>
    <!--最佳化屏幕宽度-->
    <meta name="viewport" content="width-device-width,initial-scale=1">
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script type="text/javascript">
        $(document).on("pagecreate",".demo_page",function () {
            $("#goSecond").on('click',function () {
                $(":mobile-pagecontainer").pagecontainer("change","#second",
                    {
                        transition:"slide"
                    });
            });
            $("gofirst").on('click',function () {
                $(":mobile-pagecontainer").pagecontainer("change","#first",
                    {
                        transition:"pop"
                });
            });
        })
    </script>
</head>
<body>
<!--第一页-->
<div data-role="page" data-title="第一页" id="first" class="demo_page" data-theme="a">
    <div data-role="header">
        <a href="#" id="goSecond">按我到第二页</a>
        <h1>../*/*..</h1>
    </div>
    <div data-role="content">
        .......
        .....
        ...
        /*464*--/-*/-/
    </div>
    <div data-role="footer">
        <h4>....</h4>
    </div>
</div>
<!--第二页-->
<div data-role="page" data-title="第二页" id="second" class="demo_page" data-theme="b">
    <div data-role="header">
        <a href="#first" data-transition="po">回上页</a>
        <a href="#first" id="gofirst">返回第一页</a>
        <h1>...***.</h1>
    </div>
    <div data-role="content">
        ...
        ...
        ..456/
        */-/
        ****///
        ***
    </div>
    <div data-role="footer">
        <h4>....</h4>
    </div>
</div>
</body>
</html>

由于本例是动态效果展示，暂时就先不提供执行结果了，需要的朋友可以自行复制代码执行即可。

触摸事件

触摸(touch)事件会在用户触摸页面时发生，点击、点击不放(长按)及滑动等动作都会触发touch事件。

点击事件(tap)

当用户触碰一下页面时会触发点击(tap)事件，如果点击后按住不放，几秒之后就会触发长按(taphold)事件。

tap事件再触碰页面时就会触发，语法如下：

$("div").on("tap",function(){
    $(this).hide();
});

//上述语法是点击了div组件之后，就会隐藏该组件

taphold当点击页面按住不放时就会触发，语法入下：

$("div").on("taphold",function(){
    $(this).hide();
});

//taphold事件默认是按住不放750ms之后触发，但也可以改变触发时间的长短，语法如下：

$(document).on("mobileinit",function(){
    $.event.special.tap.tapholdThreshold=3000
});

//上述语法指定按住不放3秒之后才会触发taphold事件

下面通过具体的范例进行说明：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>触摸事件</title>
     <!--最佳化屏幕宽度-->
    <meta name="viewport" content="width-device-width,initial-scale=1">
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script type="text/javascript">
        $(document).on("mobileinit",function () {
            $.event.special.tap.tapholdThreshold=2000
        });
        $(function () {
            $("#main_content").on("tap",function () {
                $(this).css("color","red")        <!--设置点击后该样式为红色-->
            });
            $("img").on("taphold",function () {
                $(this).hide();        <!--设置长按隐藏-->
            });
        });
    </script>
</head>
<body>
<div data-role="page" data-theme="b">
    <div data-role="header">
        <h1>/**-/*</h1>
    </div>
    <div data-role="content">
        <img src="images/hb.jpg" width="200" height="200" border="0"><br/>
        <div id="main_content">
            aaaaaaaaaaaaaaaaaaaa<br/>
            bbbbbbbbbbbbbbbbbbbbbbbbb<br/>
            ccccccccccccccccccccccccccc<br/>
        </div>
        <div data-role="footer">
            <h4>23324</h4>
        </div>
    </div>
</div>
</body>
</html>

执行结果如下：

----长按图片后--------点击文字后----

滑动事件

屏幕滑动的检测也是常用的功能之一，可以让应用程序使用起来更加直观与顺畅。滑动事件是指再屏幕左右滑动时触发的事件，起点必须在对象内，一秒钟内发生左右移动且距离大于30px时触发。滑动事件用swipe语法来捕捉，语法如下：

$("div").on("swipe",function(){
    $("span").text("滑动解锁我的心");
});

上述语法是捕捉div组件的滑动事件，并将消息正文显示在span组件中。

还可以利用swipeleft捕捉向左滑动事件及swiperight捕捉向右滑动事件，语法如下：

$("div").on("swipeleft",function(){
    $("span").text("向左滑动解锁我的左心房");
});

下面还是看一个范例来具体说明：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滑动事件</title>
         <!--最佳化屏幕宽度-->
    <meta name="viewport" content="width-device-width,initial-scale=1">
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("img").on("swipe",function () {
                $("span").text("触发了滑动事件");
            });
            $("#main_content").on("swipeleft",function () {
                $("span").text("触发了向左滑动事件");
            });
        });
    </script>
    <style>
        span(color:#ff0000)
    </style>

</head>
<body>
<div data-role="page" data-theme="b">
    <div data-role="header">
        <h1>滑动事件</h1>
    </div>
    <div data-role="content">
    <span></span><br/>
    <img src="images/hb.jpg" width="200" height="200" border="0"><br/>
    <div id="main_content">
        ****************
        向左滑动解锁我的心
        ****************
    </div>
    </div>
    <div data-role="footer">
        <h4>test</h4>
    </div>
</div>
</body>
</html>

执行结果如下：

--滑动花瓣后-----向左滑动文字后---

滚动事件

滚动事件是指在屏幕上下滚动时触发的事件，jQuery Mobile提供了两种滚动事件，分别是滚动开始触发及滚动停止触发，滚动事件利用scrollstart语法来捕捉开始事件；利用scrollstop语法捕捉滚动停止事件，语法如下：

$(document).on("scrollstart",function(){
    $("span").text("你滚屏试试看！")
)};

下面再用一个范例展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滚动事件</title>
    <meta name="viewport" content="width-device-width,initial-scale=1">
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script type="text/javascript">
        $(function()){
            $("img").on("scrollstart",function () {
                alert("你触发了滚动事件！");
            })
            %("img").on("scrollstop",function () {
                $("span").text("滚动结束！");
            })
        }
    </script>
    <style>
        span{color:#ff0000}
    </style>
</head>
<body>
<div data-role="page" data-theme="b">
    <div data-role="header">
        <h1>测试</h1>
    </div>
    <div data-role="content">
        <span></span><br/>
        <img src="images/hb.jpg" width="200" height="200" border="0"><br/>
        <div id="main_content">
            ******************
            ****************
            ***********
        </div>
    </div>
    <div data-role="footer">
        <h4>滚动测试</h4>
    </div>
</div>
</body>
</html>

执行结果如下：

========

屏幕方向改变事件

当用户水平或垂直旋转移动设备时，会触发屏幕方向改变事件，建议将orientationchange事件绑定到windows组件能够有效捕捉方向改变事件。

$(window).on("orientationchange",function(event){
    alert("当前设备的方向是"+event.orientation);
});

orientationchange事件会返回设备时水平还是垂直，类型为字符串，所以处理函数加上event对象来接收orientation属性值，返回的值为landscape(横向)或portrait(纵向)。通过下面范例就能够了解oreintationchange事件的用法。由于范例需要捕捉设备方向改变事件，所以测试的工具必须提供更改设备方向的功能，此处使用Opera Mobile软件来测试执行结果。

如果设备方向改变时要获取设备的宽度与高度，可以绑定resize事件。resize事件在页面大小改变时会触发，语法如下:

 $(window).on("resize",function () {
               var win = $(this);//this指的是window
               alert(win.width()+","+win.height())
});

下面看一个范例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>方向改变事件</title>
    <meta name="viewport" content="width-device-width,initial-scale=1">
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/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 == "portrait")
               //     $("#oreintation").text("现在是垂直模式");
               if(event.orientation == "landscape")
                   $("#orientation").text("现在是水平模式");
               else
                   $("#orientation").text("现在是垂直模式");

           }) ;
           $(window).on("resize",function () {
               var win = $(this);//this指的是window
               alert(win.width()+","+win.height())
           })
        });
    </script>
    <style>
        span{color:#ffff00}
    </style>
</head>
<body>
<div data-role="page" data-theme="b">
    <div data-role="header">
        <h1>方向改变事件测试</h1>
    </div>
    <div data-role="content">
        <span id="orientation"></span><br/>
        <img src="images/hb.jpg" width="200" height="200" border="0"><br/>
        <div id="main_content">
            测试测ce
            */*/*/
            测试测试/*
            */*/
        </div>
    </div>
    <div data-role="footer">
        <h4>方向测试</h4>
    </div>
</div>
</body>
</html>

下面是执行结果：

// if(event.orientation == "portrait")

//$("#oreintation").text("现在是垂直模式");

这段代码博主在测试的时候不知道为什么无法执行，所以就使用了if else的形式来执行....

Web前端开发学习之路——JQuery Mobile事件

猜你喜欢