深入jQuery Mobile的事件

来源：互联网发布：网狐棋牌游戏源码编辑：程序博客网时间：2024/05/16 01:57

在，我们来深入jQuery Mobile的事件，我们可以通过jQuery Mobile的API来扩展如下的事件类型。

Touch事件
方向Orientation事件
滚动scroll事件

Touch事件

在jQuery Mobile中，有不少关于touch的事件。其中主要的有如下5类：tap,taphold,swipe,sipeleft,swiperight，它们的含义如下：

Touch事件事件名含义tap当用户点屏幕时触发taphold

当用户点屏幕且保持触摸超过1秒时触发

swipe当页面被垂直或者水平拖动时触发。这个事件有其相关联的属性，分别为scrollSupressionThreshold, durationThreshold, horizontalDistanceThreshold, and verticalDistanceThresholdswipeleft当页面被拖动到左边方向时触发swiperight当页面被拖动到右边方向时触发

要绑定这些事件，只需要在document.ready()中进行编程即可，如下代码示例：

<!DOCTYPE HTML> 
<html> 
<head> 
  <title>Understanding the jQuery Mobile API</title> 
  <link rel="stylesheet" href="jquery.mobile.css" /> 
  <script src="jquery.js"></script> 
  <script type="text/javascript"> 
    $(document).ready(function(){ 
      $(".tap-hold-test").bind("taphold", function(event) { 
        $(this).html("Tapped and held"); 
      });   
    }); 
  </script> 
  <script src="jquery.mobile.js"></script> 
</head> 
 
<body> 
  <div data-role="page" id="my-page"> 
    <div data-role="header"> 
            <h1>Header</h1> 
        </div> 
        <div data-role="content"> 
            <ul data-role="listview" id="my-list"> 
                <li class="tap-hold-test">Tap and hold test</li> 
            </ul> 
    </div> 
  </div> 
</body> 
</html>

从上面的代码可以看到，将一个list列表跟taphold事件进行了绑定，当DOM加载完毕后，当触发taphold事件后，就会显示Tapped and held的提示信息。

jQuery Mobile方向感应事件

在现在的智能手机中，都有对方向变换的自动感知功能，比如当手机方向从水平方向切换到垂直方向时，则会触发该事件。在jQuery Mobile中，可以通过

orientationchange事件进行绑定，并且可以设定是垂直方向还是水平方向，如下代码所示：

$(document).ready(function(){ 
$('body').bind('orientationchange', function(event) { 
alert('orientationchange: '+ event.orientation); 
}); 
});

在上面的代码中，通过对body元素绑定orientationchange事件，并显示出当前的orientation属性。但要注意的是，即使在 DOM加载完后，还是应该重新调用该事件，因为在DOM加载时有时可能orientationchange事件还没能完全加载完毕，所以应该按如下的方法在ready加载后，再加载一次：

$(document).ready(function(){ 
$('body').bind('orientationchange', function(event) { 
alert('orientationchange: '+ event.orientation); 
}); 
$('body').trigger('orientationchange'); 
});

jQuery Mobile滚动事件

当用户在设备上滚动页面时，jQuery Mobile提供了滚动事件进行监听。其中首先介绍的是scrollstart事件，该事件发生在页面滚动开始时，如下代码：

$(document).ready(function(){ 
$('body').bind('scrollstart', function(event) { 
//相关的滚动开始代码 
}); 
});

同样，当滚动停止后，则可以用scrollstop事件进行监听，如下代码：

$(document).ready(function(){ 
$('body').bind('scrollstop', function(event) { 
//相关滚动停止的代码 
}); 
});