JS事件

一、四种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
    所绑定的当前对象上所有触摸点的列表；
• changedTouches
  触发事件时改变的触摸点的集合。
  举个例子：有两个元素div1和div2，只有div2绑定了touchstart事件，第一次放下一个手指在div2上，触发了touchstart事件，这个时候，三个集合的内容是一样的，都包含这个手指的touch。再放下两个手指一个在div1上，一个在div2上，这个时候又会触发事件，但changedTouches里面只包含第二个第三个手指的信息，因为第一个没有发生变化，而targetTouches包含的是在第一个手指和第三个在div2上的手指集合，touches包含屏幕上所有手指的信息，也就是三个手指。

二、mouse事件

• 当我们点击一个元素时会触发mouse事件：

  • mouseover
    鼠标指针移动到指定的对象上时发生，与所绑定的DOM无关。
  • mousemove
    当指针设备在元素上移动时被触发。
  • mousedown
    鼠标按钮被按下时触发。
  • mouseup
    鼠标按钮被释放弹起时触发。

• 事件属性

  • 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指向当前事件活动的对象（一般为父级）。