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