一、移动端的事件

移动端新增了“touch”触摸事件，因为手指的行为叫“触摸”，而鼠标的行为叫“点击”

依然支持点击事件，只是有300ms的延迟

举例：

var box = document.getElementById("box");
// 获取当前时间
var date = new Date();
// 绑定click事件
box.onclick = function(){
    // 改变文字颜色
    this.style.color = "white";
    console.log("onclick", new Date() - date);
}

// touchstart事件
// 使用dom2级绑定方式
box.addEventListener("touchstart", function(){
    // 改变文字颜色
    this.style.color = "blue";
    console.log("touchstart", new Date() - date);
});

这两个数值就是两个事件执行的毫秒值差：

1.1 移动端的三个事件

触摸开始事件：touchstart
触摸移动事件：touchmove
触摸结束事件：touchend

绑定方式：

// touchstart
box.addEventListener("touchstart", function(){
    console.log("触摸开始");
});

// touchmove
box.addEventListener("touchmove", function(){
    console.log("触摸中");
});

// touchend
box.addEventListener("touchend", function(){
    console.log("触摸结束");
});

1.2 事件对象

touchstart和touchmove可以通过e.touches来获取手指的相关信息：

// touchstart
box.addEventListener("touchstart", function(e){
    console.log(e);
    // 查看手指相关信息
    console.log(e.touches[0]);
    // 查看手指位置
    console.log("X:", e.touches[0].clientX);
    // 查看手指位置
    console.log("Y", e.touches[0].clientY);
});

// touchmove
box.addEventListener("touchmove", function(e){
    console.log(e);
    // 查看手指相关信息
    console.log(e.touches[0]);
    // 查看手指位置
    console.log("X:", e.touches[0].clientX);
    // 查看手指位置
    console.log("Y", e.touches[0].clientY);
});

touchend通过e.changedTouches来获取手指的相关信息

// touchend
box.addEventListener("touchend", function(e){
    console.log(e);
    // 查看手指相关信息
    console.log(e.changedTouches[0]);
    // 查看手指位置
    console.log("X:", e.changedTouches[0].clientX);
    // 查看手指位置
    console.log("Y", e.changedTouches[0].clientY);
});

// touchend事件中，获取手指信息的属性不是通过 e.touches 来获取，而是通过 e.changedTouches来获取