这是我参与「第四届青训营 」笔记创作活动的第23天
今天所记录的是移动端一些特殊的js事件。
一、touch事件
touch事件是移动端特有的js事件，共有四种touch事件：
touchstart: //手指放到屏幕上时触发
touchmove: //手指在屏幕上滑动式触发
touchend: //手指离开屏幕时触发
touchcancel: //系统取消touch事件的时候触发
下面来记录前三种事件的使用方法：
1、获取元素
var div=document.querySelector('div');
2、绑定触摸（touchstart）事件
div.addEventListener('touchstart',function (){
// touchstart触发条件是按一下
console.log('摸了一下');
})
3、绑定移动鼠标（touchmove）事件
div.addEventListener('touchmove',function (){
// touchmove触发条件是按住不松拖动触发
console.log('继续摸');
})
4、绑定鼠标离开（touchend）事件
div.addEventListener('touchend',function (){
// touchend触发条件是按住不松拖动触发后松开
console.log('继续摸');
})
二、TouchEvent触摸对象
TouchEvent是touch事件的对象，可以描述手指在触摸平面(触摸屏，触摸板等) 的状态变化。包括touchstart、touchmove、touchend三个事件对象，在实际开发中经常使用的是targetTouches。
| 触摸列表 | 说明 |
|---|---|
| touches | 表示正在触摸屏幕的所有手指的列表 |
| targetTouches | 表示正在触摸当前DOM元素的手指列表 |
| changedTouches | 表示手指状态发生了改变的列表 |
div.addEventListener('touchstart',function (e){
console.log(e);
console.log(e.touches);
// touches 正在触摸屏幕的所有手指的列表
console.log(e.targetTouches);
//targetTouches 正在触摸当前DOM元素的手指列表 （是最常使用的一个事件对象）
//当事件侦听的是一个DOM元素，touches和targetTouches是一样的
console.log(e.changedTouches);
//changedTouches 手指状态发生了改变的列表 从无到有 或者 从有到无
console.log(e.targetTouches[0]);
//打印当前DOM元素第一个手指的相关信息 ， 比如手指坐标
div.addEventListener("touchend",function(e){
// 当手指离开DOM元素时，touches和targetTouches的长度length为0，因为并没有手指在触摸元素
// 但changedTouches的长度length是1，因为它是从有到无，可以记录
console.log(e);
})
