开发者学堂课程【移动 Web 前端开发：js 功能-touch 事件（绑定&触摸点）】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8414
js 功能 -touch 事件（绑定&触摸点）
内容介绍
一、touch 事件介绍
二、怎么使用这些事件
三、滑动效果分析
一、touch 事件介绍
移动端特有事件，触屏设备特有的事件， Android ， iOS 设备上才有。
Touch 包含三个事件：
1、touchstart ：
平时操控触屏设备的时候，经常会做滑动的操作，滑动的手势，滑动的先后顺序，先把手指放上去，再进行移动，手指移开屏幕，这样的一个过程。这个过程当中，全部都可以用 touch 事件监听到，点击某个按钮一样，在移动端做滑动，也有专门的事件监听，touchstart 的意思是，手指刚刚触摸到屏幕的时候，触发的事件
2、touchmove ：手指在屏幕上滑动的时候，会不停的触发
3、touchend ：手指离开屏幕的时候，触发的事件
4、touchcancel : 被迫终止（来电）滑动，触发的事件，不需要掌握。手指离开屏幕是主动触发到的，touchcancel 是被动的，被迫终止的意思是，在滑动手机屏幕的时候，突然来电，手指被迫离开当前滑动的元素。
上面三个都是需要掌握的，
二、怎么使用（绑定）这些事件
绑定：
通过 on 来绑定，这样的绑定事件有一个特点，当再次绑定一个事件的时候会被覆盖掉。所以 window.onload 第二次绑定会被覆盖掉。
新建一个 HTML File 名为 05 touch 事件
--------javascript----------
< !DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name=" viewport"content= " width=device -width , user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>touch事件</title>
<style>
body{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div>
</div>
<script>
/*给 div 绑定 touch 事件*/
var dom = document.querySelector('div');
/* touchstart */
/* dom.attachEvent(); ie*/
/*手指刚刚触摸到屏幕的时候，触发的事件*/
dom.addEventListener('touchstart',function(){
console.log('touchstart');
});
/*手指在屏幕上滑动的时候，会不停的触发*/
dom.addEventListener('touchmove',function(){
console.log('touchmove');
});
/*手指离开屏幕的时候，触发的事件*/
dom.addEventListener('touchend',function(){
console.log('touchend');
});
</script>
</body>
</html>
'''
三、滑动效果分析
拖拽左右滑动的效果称之为滑动效果，拖拽怎么改变相对元素的位置，坐标，判断移动图标时候相对改变，改变所对应的元素，PC 端靠定位来移动的。
移动端的滑动效果是依靠 touch 相关事件，根据触摸位置的改变，来改变对应元素的位移 translate
1.怎么监听位置的改变
2.怎么获取当前的坐标
3.计算位移再设置滑动
紧紧触摸一下，touchmove 触发了，打开查看 touchstart
TouchEvent {isTrusted: true}
altKey: false
bubbles: true
cancelBubble: false
cancelable: true
changedTouches: TouchList
ctrlKey: false
currentTarget: null
defaultPrevented: false
detail:0
eventPhase: 0
isTrusted: true
isTrusted: true
metaKey: false
path: Array[5]
returnValue: true
shiftKey: false
sourceCapabilities: InputDeviceCapabilities
srcElement: div
target: div
targetTouches: TouchList
timeStamp: 1491360883100
touches: TouchList
type: "touchstart ”
view: Window
which: 0
__proto__ : TouchEvent
触摸点的集合，记录触摸点的
changedTouches ：当前最新改变的触摸点集合，整个事件都会有 changedTouches 记录
targetTouches ：记录当前元素上面的所有触摸点集合，touchend 没有记录
touches ：记录页面上所有的触摸点集合， touchend 没有记录
/*手指在屏幕上滑动的时候 会不停的触发*/
dom. addEventListener( 'touchmove' , function(e){
console. log(e') ;
把 move 事件打印出来了
TouchEvent {isTrusted: true}
altKey: false
bubbles: true
cancelBubble: false
cancelable: true
changedTouches: TouchList
ctr1lhe/: false
currentTarget: null
defaultPrevented: false
detail:0
eventPhase:0
isTrusted: true
isTrusted: true
metaKey: false
path: Array[5]
returnValue: true
shiftKey: false
sourceCapabilities: InputDeviceCapabilities
srcElement: div
target: div
targetTouches: TouchList
timeStamp: 1491361518375
touches: TouchList
type: "touchmove"
view: Window
which:0
__proto__ : TouchEvent
/*手指离开平屏幕的时候触发的事件*/
dom. addEventListener( 'touchend' , function(e){
console.log(e);
altKey: false
bubbles: true
cancelBubble: false
cancelable: false
ChangedTouches: TouchList
ctrlKey: false
currentTarget: null
defaultPrevented: false
detail:0
eventPhase:0
isTrusted: true
isTrusted: true
metaKey: false
path: Array[5]
returnValue: true
shiftKey: false
sourceCapabilities: InputDeviceCapabilities
srcElement: div
target: div
targetTouches: TouchList
timeStamp: 1491361554634
touches: TouchList
type: "touchend"
view: Window
which:0
__proto__ : TouchEvent
目的：获取坐标
clientX 、 clientY
基于当前视口触摸点的坐标
pageX 、 pageY
基于当前页面触摸点的坐标
screenX 、 screenY
基于当前屏幕触摸点的坐标
在平常的手机端，浏览器上端有控制栏，有通知栏，浏览器下端有工具栏，可能还会有切换栏，中间部分才是网页。相对于屏幕而言，这个点可能是1.1，相对于页面而言，1.1，对屏幕而言是2.2，可能屏幕比页面大。不需要关心当前是什么坐标，因为在页面上移动的时候，从1.1移动到1.2，要判断这两个点之间的距离，跟坐标有很大的关系，这个点可能对于屏幕而言是2.2，2.3，但是两个点x轴方向上的距离是一样的，目的是用两个坐标记录两个点之间的距离。
假设这里有个目标控制元素，目标控制元素坐标距离是0和0，假如这个触摸点摸到了这个元素了，假设触摸点坐标为（1，1），移动到这里坐标变成了（1，2），改变了1个距离，根据这个1来进行位移到目标控制元素上，就形成了一个滑动的效果，这是在做轮播图之前一个准备工作，了解移动端三个特有的事件，了解如何去绑定，移动端包含哪些东西，获取坐标的目的，根据画的那个图来实现滑动效果。
