1.觸摸事件

1.三個(gè)觸摸事件：

1.touchsatrt 當(dāng)手指觸摸屏幕的時(shí)候觸發(fā)

2.touchmove 當(dāng)手指在屏幕上滑動(dòng)的時(shí)候連續(xù)觸發(fā) /

3.touchend 當(dāng)手指離開的時(shí)候觸發(fā)*/

2.添加事件方式

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

3.事件下ev相關(guān)的屬性

截圖20170210111653.png

4.事件返回的e對(duì)象包含那些移動(dòng)端特有的屬性：

changedTouches: 頁面上最新更改的所有觸摸 他是一個(gè)數(shù)組長(zhǎng)度為一如果有無數(shù)個(gè)同時(shí)點(diǎn)他就會(huì)為2，3,4.。。。。。。。

targetTouches: 目標(biāo)元素的所有當(dāng)前觸摸 只會(huì)包含目標(biāo)元素之內(nèi)的觸摸點(diǎn)集合，之外的就不會(huì)包含在內(nèi)了

touches: 頁面上的所有觸摸 包含目標(biāo)元素內(nèi)的和目標(biāo)元素之外的

touchmove：當(dāng)手指在屏幕上滑動(dòng)時(shí)連續(xù)觸發(fā)。

touchend：當(dāng)手指離開屏幕時(shí)觸發(fā)。他只會(huì)記錄頁面上最新更改的所有觸摸也就是changedTouches

5. e.touches[0] 的重要坐標(biāo)

截圖20170210113122.png

注意：在touchend事件的時(shí)候event只會(huì)記錄changedtouches
clientX:觸摸目標(biāo)在視口中的X坐標(biāo)。（常用）
clientY:觸摸目標(biāo)在視口中的Y坐標(biāo)。（常用）
pageX :觸摸目標(biāo)在頁面中的x坐標(biāo)。
pageY :觸摸目標(biāo)在頁面中的y坐標(biāo)。
screenX:觸摸目標(biāo)在屏幕中的x坐標(biāo)。(不常用)
screenY:觸摸目標(biāo)在屏幕中的y坐標(biāo)。(不常用)

2.過渡事件和動(dòng)畫事件

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