JS 点击事件学习总结

废话篇：

在我们编写无论什么网页内容的时候我们总是或多或少的要接触到点击事件这一范畴的，写过几个简短的demo和网页之后，感觉自己对电机事件一类的东西了解也更为的清楚了，之前写过很多零零散散的东西现在整理一下，方便之后的阅读和复习。

正文片：

1、PC上的点击事件。

　　PC端用户通过鼠标和网页进行互动操作，此时我们用鼠标一类的事件的情况会有许多。因此在PC端我们多用mouse事件或者click事件来进行相关逻辑的编写。

　　事件的发生依照事件六中的先后顺序来进行的，对于鼠标垫额交互事件来说，事件的先后顺序是，mouseDown -> mouseMove -> mouseUp -> click -> dblclick

　　　　mouseDown事件标示的是当鼠标点击按下的时候需要执行的处理机制。

　　　　mouseMove事件是在鼠标点击还没有放开的情况之下，用户拖动鼠标时触发的事件。3

　　　　mouseUp事件是当我们放开鼠标按键的时候触发的事件。

　　　　click事件是当我们完成一次点击的时候所触发的事件。

　　　　dblclick标示的是双击事件，当点击完成两次之后会调用绑定的相关函数。当然执行顺序在click之后。  P.S.当同一个元素绑定了点击事件和双击事件的时候，我们想要把当前的两种事件的处理机制分开来的话。如果不做特殊处理的话，可能会在每一次想要执行双击事件之前都会执行一次单击事件。此时我们可以使用延迟函数setTimeout，并在调用dblclick事件的时候把在单击事件中的延时函数所返回的等待队列中的内容删除，如此的话，就可以实现控制当双击的时候不会执行单机逻辑。

由上面的事件执行顺序来看，我们在对一个元素绑定事件的时候要注意事件的处理过程的先后顺序，这样才能更好的控制事件之间的逻辑关系。

2、移动端点击事件。

　　在移动端上面使用点击事件的时候和PC端上会有些不同，因为移动端上面，我们的交互方式是不相同的，移动端使用电容屏，所以在绑定顶相关的时候的时候，我们应该注意的是移动端的事件的顺序是touchstart -> touchmove -> touchend -> click -> dblclick

　　　　touchstart表示的是当用户的手指点击当前的屏幕的时候触发的事件。

　　　　touchmove表示的是当前的用户手指点击并滑动之后时触发的事件。

　　　　touchend标示的是当前的用户手指离开触摸屏之后触发的事件。

　　　　其他的两个时间和上面的提到的事件是相同的情况。

　　当时在移动端和PC端有一点是不相同的，因为同一时间有多个手指同时触碰，所以需要有一个列表来记录触碰的先后顺序和坐标。

　　在触碰事件种会有如下的其他参数：

　　　　1.touches列表，存储的是当前屏幕上所有触屏手指的集合列表。

　　　　2.targetTouches列表，存储的是绑定了事件的元素上面的触屏手指的集合列表。

　　　　3.changeTouches列表，存储的是触摸事件触发的时候改变了的触摸手指的集合列表（e.g.当我们用一个手指触屏的时候，changeTouches列表中存储的是，当前这一手指触摸到屏幕的对象信息，而当我们保持第一个触摸手指的位置不变的时候，而在用另外两个手指触摸屏幕的时候，changeTouches将会存储的信息是两外两个触摸事件的对象，而没有第一个手指触摸时间的对象了，因为它没有改变。）。

　　由上可知，当我们需要获取手机端显示坐标的时候我们需要用当前的事件来获取touches列表中的一项数据，touches[0]，然后才可以用这一数据来获取当前的点击位置。

3、事件冒泡。

　　当当前元素绑定了点击事件的时候，而其父级元素也绑定了同样的事件的时候，当自己元素事件触发了的话，父级元素事件也会在同一时间内触发。并且其执行顺序在当前元素下一执行事件之前。

　　例如，当我们为一个元素设置了mouseDown（touchstart）和click事件的时候，同时在为其父级元素设置了相同的事件，当我们可以发现，在子元素的mouseDown或者是touchstart事件发生的时候父级元素的mouseDwon（touchstart）事件也会在子元素当前事件发生之后立即触发。而后子元素的click事件再出发之后，父级元素click事件一并触发。

　　其实我们同样也是可以阻止事件冒泡的发生的，通过event.stopPropagation()调用来阻止。

　　当然，其实浏览器对于一些监听事件是有默认处理的，例如在移动端touchmove有内容滚动的默认事件，我们可以通过event.preventDefault()来进行阻止的。

以上就是我现在学习到的一些内容，如有补充，后期更新。