js阻止事件冒泡(stopPropagation)与取消事件的默认动作(preventDefault)的区别

今天来说一下js阻止事件冒泡(stopPropagation)与阻止元素或方法的默认行为(preventDefault)的区别

dom事件流

说到阻止事件冒泡，那么就要先说一下dom事件流，因为事件冒泡属于事件流概念的一部分。

dom事件流包含三个环节，事件捕捉、事件到达、事件冒泡，目前市面上的所有的浏览器都是支持这个dom事件流的，它的执行顺序也是上面的这个顺序。事件捕捉是从不确定的window开始一级一级向下执行的，然后执行事件到达（我们点击的目标元素），接下里再开始事件冒泡，事件冒泡的顺序刚好和事件捕捉相反，具体流程如下：

阻止事件冒泡

了解事件流后，那么阻止事件冒泡就好理解了，就是通过stopPropagation方法，来阻止目标元素各级父元素上可能绑定的事件的执行。

事件的默认动作

我们点击a标签的时候，会自动有个跳转的事件；点击form表单中的button，会自动有个提交的事件等等，这些事件都会绑定默认的动作，或跳转或提交。

有的时候我们不希望这个事件的默认动作被执行，比如form表单，我们希望使用ajax去提交，这个时候，就需要取消事件的默认动作，然后preventDefault()这个方法就出来了。

总结

js阻止事件冒泡(stopPropagation)和取消事件的默认动作(preventDefault)没有直接的关联关系，不过他们都是为了取消特定事件或任务的默认动作继续被执行。