JavaScript事件传播

默认情况下事件处理程序为冒泡事件处理程序，即，从目标元素上冒泡到根元素上。

目标元素是指，在事件发生的位置存在的DOM树最底层的元素，即“辈分最低”的元素。

一般情况下我们希望执行处理程序的元素就是目标元素，如果，该元素的祖先元素也注册了同样类型的事件的处理程序，事情就变得有趣了。这种情况如下图：

我们希望点击紫色部分时只触发son元素的事件处理程序，点击灰色部分才触发father元素的事件处理程序。

点击灰色部分的话不用特殊处理也没什么问题，但是点击紫色部分时我们需要阻止冒泡到祖先元素上后触发祖先元素的处理程序。

点击紫色部分时，event.target是son,所以我们需要在father元素的处理程序中进行如下判断：

if(event.target==this){
//事件处理操作
}

这样就可以阻止冒泡触发。

其实，现实场景中我们经常会遇到这种情况，我们希望事件的目标元素并不是“备份最低”的元素，这种情况如下：

把上图想象成2048游戏的一个棋盘格，我们在棋盘格上面上下左右滑动的时候，希望father的所有子元素同时向滑动的方向移动。

也就是说，我们把滑动的事件处理程序注册到father元素上，而不是son元素上，可是，在棋盘格上的滑动event.target就是son元素怎么办？

不用担心，只要我们不对son元素设定相同事件的监听函数就行(已修正)。

还有一个问题。如果，事件存在默认处理程序，则需要使用event.preventDefault()来阻止默认行为。比如，在移动设备上的touchstart,touchmove,touchend事件，在该事件执行时会触发页面滚动默认行为，所以，在注册的时候最好阻止，因为这些事情并不是所有的浏览器都会帮你完成。

关于多种方式注册的事件程序执行顺序以及preventDefault的机制后续更新。

／＊＊＊2016-4-16＊＊＊／

既然我们还要处理冒泡带来的麻烦，那么事件冒泡到底有什么用呢？

假设这样一种情况，在一个<form>表单中有多个<input>，我们希望在<form>上注册一个监听程序监听所有子元素的变化，这时，在子元素上发生的变化冒泡到form上由form处理而不需要所有的子元素单独注册。