事件系统

来源：佛山兄弟连IT培训学校时间：2019/8/16 8:42:47

事件是用户与页面交互的基础，到目前为止，DOM事件从PC端的鼠标事件(mouse)发展到了移动端的触摸事件(touch)和

手势事件(guesture)，touch事件描述了手指在屏幕操作的每一个细节，guesture则是描述多手指操作时更为复杂的情况，总结如下：

第一根手指放下，触发touchstart，除此之外什么都不会发生

手指滑动时，触发touchmove

第二根手指放下，触发gesturestart

触发第二根手指的touchstart

立即触发gesturechange

任意手指移动，持续触发gesturechange

第二根手指弹起时，触发gestureend，以后将不会再触发gesturechange

触发第二根手指的touchend

触发touchstart(多根手指在屏幕上，提起一根，会刷新一次全局touch)____

弹起第一根手指，触发touchend

更多关于手势事件的介绍请参考：

gesture事件处理复杂手势

DOM2.0模型将事件处理流程分为三个阶段，即事件捕获阶段、事件处理阶段、事件冒泡阶段，如图所示：

事件捕获：当用户触发点击事件后，顶层对象document就会发出一个事件流，从最外层的DOM节点向目标元素节点传递，最终到达目标元素。

事件处理：当到达目标元素之后，执行目标元素绑定的处理函数。如果没有绑定监听函数，则不做任何处理。

事件冒泡：事件流从目标元素开始，向最外层DOM节点传递，途中如果有节点绑定了事件处理函数，这些函数就会被执行。

利用事件冒泡原理可以实现事件委托

，所谓事件委托，就是在父元素上添加事件监听器，用以监听和处理子元素的事件，避免重复为子元素绑定相同的事件。当目标元素的事件被触发以后，这个事件就从目标元素开始，向最外层元素传递，最终冒泡到父元素上，父元素再通过event.target

获取到这个目标元素，这样做的好处是，父元素只需绑定一个事件监听，就可以对所有子元素的事件进行处理了，从而减少了不必要的事件绑定，对页面性能有一定的提升。