Mobile Web前端开发系列: 事件处理（三）

转自：http://blog.sina.com.cn/s/blog_6d48e77101016fm3.html

通过前两篇文章，我们已经了解了mobile上的基本事件模型，这篇文章我们主要讲一下Tangram Mobile的事件。Tangram Mobile 究竟包含那些事件呢，为什么要开发这些事件？平时我们在开发的时候可能会需要一些较复杂的事件，例如双击屏幕事件、长按事件或者 滑动事件，这些事件并不是标准事件，浏览器并没有响应的实现，所以我们需要自己来实现这些事件。

on和un

Tangram Mobile里的事件，例如下面的tap、dbtap、taphold、swipe、pinch等事件都是组合事件， 那什么是组合事件呢，就是说每个事件都是通过多个事件模型组合而成的，例如tap事件是通过使用ontouchstart、 ontouchmove和ontouchend事件来完成的，这样我们需要通过特殊的on函数和un函数来添加事件监听器和移除 事件监听器，例如

baidu.event.on(element, 'tap', fn); baidu.event.un(element, 'tap', fn);

on和un函数除了可以处理Tangram Mobile的自定义事件，还可以处理标准事件，我们可以这样用，

baidu.event.on(element, 'touchstart', fn); baidu.event.un(element, 'touchstart', fn);

tap事件

触摸单击事件，一般情况我们可以通过ontouchstart或者ontouchend来完成单击的事件，那为什么还需要 这个tap事件呢，我们先来解释下这个tap事件是怎么工作的，大家就会知道什么情况下需要用这个tap事件了， 当我们按下手指并快速抬起的时候才会触发tap事件，也就是说当我们按下手指后移动手指再离开或者按下手指 很久再离开都不会触发tap事件。

这样定义tap事件是为了把tap事件和dbtap、taphold和scroll等事件区分开。 区分开有什么好处呢，例如当我们按下手指想滑动页面查看页面其他区域的时候不小心滑到一个button，如果我们这个button只注册了ontouchstart 或者ontouchend，这时候它会触发touch事件，但是这明显不是我们想要的，但是当我们给这个button添加tap 事件就不会发生这种情况，我们可以通过这种方式来添加tap事件，

baidu.event.on(button, 'tap', fn);

dbtap事件

触摸双击事件，我们知道再mobile设备上onclick事件是可以使用的，那么ondbclick事件呢，大家可以试一下， 结果是不支持的，那么我们就需要自己开发一个双击事件，

我们可以通过这种方式来添加dbtap事件，

baidu.event.on(button, 'dbtap', fn);

我们可以通过设置dbtapThreshold来改变双击间隔时间，默认是250ms

baidu.event.dbtapThreshold = 250;

taphold事件

触摸长按事件，

我们可以通过这种方式来添加taphold事件，

baidu.event.on(button, 'taphold', fn);

我们可以通过设置tapholdThreshold来改变长按时间，默认是600ms

baidu.event.tapholdThreshold = 600;

swipe事件

触摸滑动事件，手指按住屏幕左右滑动的时候会触发事件，相册功能经常会用到这个事件， 当用户向左或向右滑动的时候，翻到相应的图片，我们可以通过这种方式来添加swipe事件，

baidu.event.on(element, 'swipe', function(e){ //e.direction 滑动方向 //e.distance 滑动绝对距离 //e.delta 滑动距离 });

我们可以通过event事件的direction来获取滑动方向，或者distance来获得滑动距离

我们可以通过设置swipeTiggerThreshold来设置左右滑动n像素触发swipe事件，默认是20

baidu.event.swipeTiggerThreshold = 20;

pinch事件

双手指放大/缩小/旋转事件，封装gesture三个事件，同时在pinch时屏蔽touch的三个事件，

我们可以通过这种方式来添加pinch事件，

baidu.event.on(element, 'pinch', function(e){ //e.rotation 手指的旋转角度 //e.scale 放缩的值 });

turn事件

旋转屏幕事件, 如果是iphone，我们可以直接使用orientationchange事件，但是anroid有些低版本 并不支持orientationchange，我们可以使用onrisize事件，android有些版本旋转后得不到准确的 innerHeight和innerWidth，我们可以通过setTimeout修复它，使用turn事件可以不用考虑以上问题，

我们可以通过这种方式来添加turn事件，

baidu.event.on(element, 'turn', function(e){ //e.orientation 当前翻转状态 });

兼容PC浏览器（Safari）

Tangram Mobile的事件兼容PC（safari）浏览器，兼容pc浏览器有什么好处呢？这里主要是考虑在mobile下 调试比较麻烦，目前的调试方法都不太方便，那如果兼容pc后，大家就可以使用pc上的调试工具来调试。那么 是如何做到兼容pc的呢，主要是把touch事件适配成mouse事件，

getCompat = function(elem, evtName) { var _compat = { "touchstart": { name: 'mousedown', element: elem }, "touchmove": { name: 'mousemove', element: document }, "touchend": { name: 'mouseup', element: elem } }, _event = { name: evtName, element: elem }; _event = (baidu.browser.isSupportTouch ? _event : _compat[evtName]) || _event; return _event; };

在on和un方法里面，会调用这个getCompat方法，来适配相应的事件和对象。

fire、fireMouseEvent、fireCustomEvent

fire方法可以触发各种类型的事件，包括KeyEvents、MouseEvents、HTMLEvents、UIEvents， fireMouseEvent主要是触发MouseEvents（包括touch事件），fireCustomEvent可以触发组合 事件，例如tap、dbtap、taphold、turn等事件。