一、移动上的事件
1.触摸事件
常用触摸事件
| 事件 | 描述 |
|---|---|
| touchstart | 手指刚接触屏幕时触发 |
| touchmove | 手指在屏幕上移动时触发 |
| touchend | 手指从屏幕上移开时触发 |
| touchcancel | 当系统停止跟踪触摸的时候触发 |
实例
span.addEventListener('touchstart',function(){
div.style.display="block";
},false);
addEventListener是一个侦听事件并处理相应事件的函数。一般有三个参数：第一个是事件的类型，第二个是侦听到事件后处理事件的函数，第三个是事件捕获（只有两个值，true或false（为true优先触发自己的，false优先触发别的））。
除了常用的DOM属性，触摸事件还包括下列三个用于跟踪触摸的属性：
touches:表示当前跟踪的触摸操作的touch对象的数组。
1.当一个手指在触屏上时，event.touches.length=1。
2.当两个手指在触屏上时，event.touches.length=2。以此类推
changedTouches:导致触摸事件被触发的触摸点数组。
targetTouches:特定于事件目标的touch对象数组。
触摸事件坐标
| 属性 | 描述 |
|---|---|
| clicntX | 触摸目标在视口中的X坐标 |
| clientY | 触摸目标在视口中的Y坐标 |
| identfier | 标识触摸的唯一ID |
| pageX | 触摸目标在页面中的X坐标 |
| pageY | 触摸目标在页面中的Y坐标 |
| screenX | 触摸目标在屏幕中的X坐标 |
| screenY | 触摸目标在屏幕中的Y坐标 |
| target | 触摸的DOM节点目标 |
表中这些属性的使用方法如下代码所示：
//如果需要，用pageX或pageY代替clientX或clientY
var touch = e.changedTouches[0];
var coorX=touch.clientX;
var coorY=touch.clientY;
}
clientX/Y和pageX/Y的区别在于，前者相对于视觉视口的左上角，后者相对于布局视口的左上角，布局视口是可以滚动的。具体用在那组坐标取决于想做什么。
二、Zepto框架
1.Zepto概述
Zepto.js是一个轻量的js库，它与jQuery有类似的API。
zepto的设计目的是不到10K的通用库，快速下载，有一个熟悉的api-->精力专注在开发上。
流行起来的原因：轻量；只支持现代浏览器；非常方便的搭配其他框架（phoneGap）来编写代码；优秀的源代码，性能良好。
zepto和jQuery的对比：
浏览器兼容：zepto偏移动端，jQuery偏PC端；
文件大小：zepto 10k jQuery 30k ；
部分API接口：参数和执行结果有可能不一致；
生态圈：jQuery更好；
核心库：zepto核心库的性能要比jQuery优秀；
2.Zepto和jQuery的区别
2-1
正对移动端程序，Zepto有一些基本的触摸事件可以用来坐触摸屏交互，Zepto不支持IE浏览器。
2-2
Dom操作的区别：添加id时jQuery不会生效，而Zepto会生效。
2-3
事件触发的区别：使用 jQuery 时 load 事件的处理函数不会执行；使用 Zepto 时 load 事件的处理函数会执行。
2-4
事件委托的区别：在Zepto中，当a被点击后，依次弹出了内容为”a事件“和”b事件“，说明虽然事件委托在.a上可是却也触发了.b上的委托。但是在 jQuery 中只会触发.a上面的委托弹出”a事件“。Zepto中，document上所有的click委托事件都依次放入到一个队列中，点击的时候先看当前元素是不是.a，符合则执行，然后查看是不是.b，符合则执行。而在jQuery中，document上委托了2个click事件，点击后通过选择符进行匹配，执行相应元素的委托事件。
2-5
width()和height()的区别：Zepto由盒模型(box-sizing)决定，用.width()返回赋值的width，用.css('width')返回加border等的结果；jQuery会忽略盒模型，始终返回内容区域的宽/高(不包含padding、border)。
2-6
offset()的区别：Zepto返回{top,left,width,height}；jQuery返回{width,height}。
2-7
Zepto无法获取隐藏元素宽高，jQuery 可以。
2-8
Zepto中没有为原型定义extend方法而jQuery有。
2-9
Zepto 的each 方法只能遍历 数组，不能遍历JSON对象。
2-10
Zepto在操作dom的selected和checked属性时尽量使用prop方法，在读取属性值的情况下优先于attr。Zepto获取select元素的选中option不能用类似jQuery的方法（美元符号）('option[selected]'),因为selected属性不是css的标准属性。应该使用（美元符号）('option').not(function(){ return !this.selected })。
3.Zepyo常用的方法和属性
3-1.$()
通过执行css选择器包装dom节点，创建元素或者从一个html片段来创建一个Zepto对像。
Zepto集合是一个类似数组的对象，它具有链式方法来操作它指向的dom。除了--（美元符号）对象上的直接方法外(如:extend)，文档对象中的所有方法都是集合方法。
如果选择器中存在content参数(css选择器、dom或者Zepto集合对象)，那么旨在所给的节点背景下进行css选择器；这个功能有点像使用（美元符号）(context).find(selector)。
可以通过一个html字符串片段来创建一个dom节点。也可以通过给定一组属性映射来创建节点。最快的创建元素时使用<div>或<div/>形式。
3-2.addClass
addClass(name)
为每个匹配的元素添加指定的class类名，多个class类名通过空格分隔。
3-3.attr
attr(name)
attr(name, value)
attr(name, function(index, oldValue){...})
attr({name:value,name2:value2,...})
读取或设置dom的属性。如果没有给定value参数，则读取Zepto对象集合第一个元素属性值。当给定了value参数，则设置Zepto对象集合中所有元素的属性值。当value参数为null，那么这个属性将被移除（类似removeAttr），多个属性以通过对象值的方式进行设置。
3-4.has
has(selector)
has(node)
判断当前Zepto对象集合的子元素是否有符合选择器的元素，或者是否包含指定的dom节点，如果有，则返回新的Zepto集合对象，该对象过滤掉不含有选择器匹配元素或者不含有指定dom节点的对象。
$('ol>li').has('a[href]')
3-5.hasClass
hasClass(name)
检查Zepto对象集合中是否含有指定元素的class，代码如下所示。
<ul>
<li>list item 1</li>
<li class="liTwo">list item 2</li>
<li>list item 3</li>
</ul>
<p>a paragrapg</p>
<script>
$("li").hasClass("liTwo"); //=> true
</script>
3-6.toggle
toggle([setting])
显示或隐藏。如果setting为true，相当于show方法；如果setting为false，相当于hide方法。
var input=$('input[type=text]')
$('#too_long').toggle(input.val().length>140)
3-7.toggleClass
1(names, [setting])
在匹配的元素集合中的每个元素上添加或删除一个或多个样式类。如果class的名称存在，则删除它；如果不存在则添加它。如果setting的值为真，这个功能类似于addClass；如果为假，这个功能类似与removeClass。
3-8.closest
closest(selector, [context])
closest(collection)
closest(element)
从元素本身开始，主机向上级元素匹配，并返回最先匹配selector的祖先元素。如果context节点参数存在，那么只考虑节点的后代。这个方法与parents(selector
)有点想象，但它只返回最先匹配的祖先元素。
4.Zepto独有特性
4-1.CSS transform
translate(X|Y|Z|3d)
rotate(X|Y|Z|3d)
scale(X|Y|Z)
skew(X|Y)
4-2.touch
由于在移动端，触摸事件肯定时必不可少的，因此Zepto也专门提供了几个触摸事件。
4-2-1.tap
元素被触摸的时候触发
4-2-2.singleTap and doubleTap
这一对事件可以用来检测元素上的单击和双击（如果不需要检测则用tap代替）
4-2-3.longTap
当一个元素被按住超过750ms时触发。
4-2-4.swipe,swipeLeft,swipeRight,swipeUp,swipeDown
当元素被划过时触发（可以给定位方向）
网友评论