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

dom事件流

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

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

图片来源:高阶4

阻止事件冒泡

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

事件的默认动作

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

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

总结

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

微信交流(备注:前端)