最近刚刚接触mobile端的javascript开发,相对于传统的PC Web开发,DOM应该不是瓶颈,CSS3的特效也只是锦上添花,减少开发的难度。所以,最重要的差别当属事件了,两者之间到底有什么不同呢,温故而知新,从DOM3支持的事件到html5事件再到mobile触屏事件一一进行了解。
一、PC支持的事件(DOM3):
- UI事件、
- 鼠标事件、
- 键盘事件、
- 滚轮事件、
- 焦点事件、
- 文本事件、
- 合成事件、
- 变动事件等(见javascript高级程序设计 13.4)
二、HTML5支持的事件:
- contextmenu事件, 右键显示菜单
- beforeunloaded 页面销毁之前调用
- DOMContentLoaded 用户可以尽早进行交互
- readystatechange判断js和css(IE)中是否加载完毕。
- pageshow和pagehide事件
- hashchange事件
chrome FF6+ Opera支持newURL oldURL
location处理
三、设备事件
- orientationchange事件 ios支持 window.orientation : 0 90 -90
- MozOrientation
- deviceorientation事件:旋转角度(event.alpha beta gamma) ,支持ios4.2 safari chrome Android中的webkit
- devicemotion 支持 同上。
触摸和手势事件
触摸事件:
touchstart
touchend
touchmove
支持属性:touches(数组)targetTouches changeTouches clientX clientY
identifier pageX pageY screenX screenY target
手势事件:
gesturestart
gestureend
gesturechange 支持scale 和rotation
四、zepto中的tap事件
下面就看看mobile javascript框架支持的事件是如何封装的~
zepto是mobile界最著名的轻量级框架,支持modern浏览器;gzip后大小只有9.7K,详情:
zepo官网 。包含了工具函数、继承、DOM和CSS操作、事件处理、ajax、表单操作、动画、以及终端检测、移动设备事件支持等功能。可谓“身材虽小,五脏俱全”,真心希望有空的时候可以写篇类库分析的文章,看情况吧。这里主要谈谈它对移动端事件的扩展。
不知道为什么针对于Modern浏览器、主打手机端开发的zepto并没有把touch、gesture的支持作为基础的功能,大抵是因为觉得