本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第9章，第9.9节，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看
第4章解释了如何在Web浏览器中捕获标准的事件。Mobile设备使用的是“触摸手势”（touch gesture）而不是鼠标移动。jQuery Mobile对此进行了抽象。代码清单9-10演示了如何捕获一组挑选出来的典型的Mobile事件：轻击（tapping）、滑动（swiping）、方向变化（orientation change）以及页面变化（page change）。其他的Mobile事件随后会讨论。
代码清单9-10 捕获滑动、方向变化及更多事件
00 <!DOCTYPE html> 01 <html> 02 <head> 03 <title>Events</title> 04 <meta name="viewport" 05 content="width=device-width, initial-scale=1"> 06 <link rel="stylesheet" href= 07 "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"> 08 <script type="text/javascript" 09 src="http://code.jquery.com/jquery-1.7.1.min.js"> 10 </script> 11 <script type="text/javascript" src= 12 "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"> 13 </script> 14 <script> 15 $(document).ready(function() { 16 17 $.each(('tap taphold swipe swipeleft swiperight ' + 18 'orientationchange scrollstart scrollstop pageshow ' + 19 'pagehide').split(' '), 20 function( i, name ) { 21 22 $(document).on(name, function(event) { 23 $('#status').append('target = ' + event.target + ' ' + 24 'type = ' + event.type + ' <br>'); 25 }); 26 }); 27 }); 28 </script> 29 30 </head> 31 <body> 32 33 <div data-role="page"> 34 35 <div data-role="header"> 36 <h1>Events</h1> 37 </div> 38 39 <div data-role="content"> 40 <p><a href="04b-link.html">Link to an external file</a></p> 41 <p><a href="04b-link.html" data-prefetch>Prefetch the 42 external file</a></p> 43 <p id="status"> 44 </div> 45 46 </div> 47 48 </body> 49 </html>运行这个示例时，你可以看到事件的行为及它们的处理程序。旋转你的设备，轻击、旋转并且向各个方向滑动，看看会发生什么。
表9-1列出了jQuery Mobile可以使用的事件。第16～19行只包含了所有这些事件的一个选集。演示的事件是针对典型的移动端的用户交互。你可以使用表格中的其他事件来替换这些事件来学习一下jQuery事件机制的其他部分（如页面加载周期）。使用虚拟的鼠标事件，你可以微调对触摸和鼠标驱动设备的应用程序的控制。当设备使用了鼠标时，jQuery Mobile会自动构建正确的监听程序来处理该设备。当使用的是触摸设备时，事件会转换成触摸事件，顺序和鼠标驱动的事件一样。触摸和单击事件的信息是标准化的，这样触摸和单击就会返回相同的坐标数值。当使用虚拟的鼠标事件时，你可能想避免使用vclick事件。在基于WebKit的移动端浏览器上，这会导致300毫秒的延迟，这不但对用户来说显得“迟钝”，而且事实上会导致像“双击”一样的行为。
相关资源：jquerymobile设计完整例子