一、四种touch触摸事件
- 事件
- touchstart
手指放在屏幕上时触发。
window.addEventListener('touchstart', function() {
nstartY = e.targetTouches[0].screenY;
nStartX = e.targetTouches[0].screenX;
}, false)
- touchmove
手指在屏幕滑动时持续触发
window.addEventListener("touchmove", handleMove, false);
- touchend
手指离开屏幕时触发
window.addEventListener("touchend", handleEnd, false);
- touchcancle
系统取消touch事件时触发，在触摸序列被取消时触发，用的较少。
window.addEventListener("touchend", handleCancle, false);
由于触摸会导致屏幕动来动去，所以可以会在这些事件的事件处理函数内使用event.preventDefault()，来阻止屏幕的默认滚动。
这些事件名是针对webkit内核浏览器的，IE中并不叫这些。
touch事件无法获得当前位置所在的DOM，但是可以获得当前位置的坐标，可以使用document.elementFromPoint方法获取指定坐标的DOM。
- 事件属性
- touches
当前屏幕上所有触摸点的列表； - targetTouches
所绑定的当前对象上所有触摸点的列表；
- touches
- changedTouches
触发事件时改变的触摸点的集合。
举个例子：有两个元素div1和div2，只有div2绑定了touchstart事件，第一次放下一个手指在div2上，触发了touchstart事件，这个时候，三个集合的内容是一样的，都包含这个手指的touch。再放下两个手指一个在div1上，一个在div2上，这个时候又会触发事件，但changedTouches里面只包含第二个第三个手指的信息，因为第一个没有发生变化，而targetTouches包含的是在第一个手指和第三个在div2上的手指集合，touches包含屏幕上所有手指的信息，也就是三个手指。
二、mouse事件
-
当我们点击一个元素时会触发mouse事件：
- mouseover
鼠标指针移动到指定的对象上时发生，与所绑定的DOM无关。 - mousemove
当指针设备在元素上移动时被触发。 - mousedown
鼠标按钮被按下时触发。 - mouseup
鼠标按钮被释放弹起时触发。
- mouseover
-
事件属性
- event.clientX/Y
获取的是触发点相对于浏览器可视区域左上角距离，不随页面滚动而改变。
- event.clientX/Y
event.pageX/Y
获取到的是相对文档区域左上角距离，会随着页面滚动而改变。event.screenX/Y
获取到的是触发点相对于显示屏幕左上角的距离，不随页面的滚动而改变。event.offsetX/Y或者event.layerX/Y
获取的是触发点相对于被触发dom的左上角距离。event.offsetX/Y是IE的属性，event.layerX/Y是FF的属性。event.target
触发事件时，鼠标所在的DOM。touch属性
clientX/Y、pageX/Y、screenX/Y与mouse事件的相同，target最初触发事件的DOM。
当我们点击一个元素时，触发的事件顺序是：touchstart=>touchend=>mouseover=>mousemove=>mousedown=>mouseup=>click。
三、currentTarget与Target
Target在事件的目标阶段， currentTarget在事件流的捕获、目标及冒泡阶段。只有当事件流处在目标阶段的时候，两者才是一样的。当处于捕获和冒泡阶段的时候，target指向被单击的对象，currentTarget指向当前事件活动的对象（一般为父级）。
