触屏事件基础

一、移动端触屏滑动的效果其实就是图片轮播，在PC的页面上很好实现，绑定click 和 mouseover等事件来完成。但是在移动设备上，要实现这种轮播的效果，就需要用到核心的touch事件。处理touch事件能跟踪到屏幕滑动的每根手指。

二、兼容DOM的触屏事件

1.touchstart 当手指触摸屏幕时触发

2.touchmove 当手指在屏幕上滑动时连续触发

3.touchend 当手指从屏幕上移开时触发

4.touchcancel 当系统停止跟踪触摸时触发

注：上述事件都会冒泡，也都可以取消，每个触摸事件的event对象都提供了在鼠标事件中常见的属性bubbles、cancelable view clientX clientY screenX screenY等

<script>
        // 1. 手指触摸DOM元素事件
        var div = document.querySelector('div');
        div.addEventListener('touchstart', function() {
            console.log('手指触摸到了');

        });
        // 2. 手指在DOM元素身上移动事件
        div.addEventListener('touchmove', function() {
            console.log('手指继续触摸');

        });
        // 3. 手指离开DOM元素事件
        div.addEventListener('touchend', function() {
            console.log('手指离开了');

        });
    </script>

三、 每个触摸事件包含的三个触摸列表

1.touches 当前跟踪的触摸操作的Touch对象的数组（当前屏幕上的所有手指动作的列表）

2.targetTouches 特定于事件目标的Touch对象的数组（当前DOM元素上的手指动作的列表）

3.changeTouches 自上次触摸以来发生哪些改变的Touch对象的数组（当前时间的手指动作的列表）

4.每个touch对象包含的属性

clientX 触摸目标在视口中的x坐标

clientY 触摸目标在视口中的y坐标

pageX 触摸目标在页面中的x坐标

pageY 触摸目标在页面中的y坐标

screenX 触摸目标在屏幕中的x坐标

screenY 触摸目标在屏幕中的y坐标

indetifier 标识出没的唯一ID（一个数字，用于唯一标识触摸会话中的当前手指）

target 触摸的DOM节点目标