移动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){});