移动web开发事件（二）

1.触摸事件

1.三个触摸事件：

1.touchsatrt 当手指触摸屏幕的时候触发

2.touchmove 当手指在屏幕上滑动的时候连续触发 /

3.touchend 当手指离开的时候触发*/

2.添加事件方式

dom.addEventListener('touchstart',function(e){});

3.事件下ev相关的属性

截图20170210111653.png

4.事件返回的e对象包含那些移动端特有的属性：

changedTouches: 页面上最新更改的所有触摸 他是一个数组长度为一如果有无数个同时点他就会为2，3,4.。。。。。。。

targetTouches: 目标元素的所有当前触摸 只会包含目标元素之内的触摸点集合，之外的就不会包含在内了

touches: 页面上的所有触摸 包含目标元素内的和目标元素之外的

touchmove：当手指在屏幕上滑动时连续触发。

touchend：当手指离开屏幕时触发。他只会记录页面上最新更改的所有触摸也就是changedTouches

5. e.touches[0] 的重要坐标

截图20170210113122.png

注意：在touchend事件的时候event只会记录changedtouches
clientX:触摸目标在视口中的X坐标。（常用）
clientY:触摸目标在视口中的Y坐标。（常用）
pageX :触摸目标在页面中的x坐标。
pageY :触摸目标在页面中的y坐标。
screenX:触摸目标在屏幕中的x坐标。(不常用)
screenY:触摸目标在屏幕中的y坐标。(不常用)

2.过渡事件和动画事件

obj.addEventListener('transitionStart',function(e){});
//兼容性问题
obj.addEventListener('webkitTransitionEnd',function(e){});

obj.addEventListener('transitionEnd',function(e){});


obj.addEventListener('animationStart',function(e){});
//兼容性问题
obj.addEventListener('webkitAnimationStart',function(e){});

obj.addEventListener('animationEnd',function(e){});