preventDefault与stopPropagation的使用

在讲解这两个方法之前先介绍一下事件处理程序的三个阶段：捕获阶段，“处于目标”阶段，冒泡阶段。下图是捕获阶段和冒泡阶段DOM的处理顺序。

image.png

preventDefault方法的作用是：取消事件的默认行为。
使用场景如：当鼠标右键按下的时候会出现默认菜单，如果此时你想定义自己的方法就可以使用e.preventDefault();

stopPropagation方法的作用是：取消事件的进一步捕获或冒泡。
究竟是取消冒泡阶段处理还是捕获阶段处理呢，在所有 DOM 节点中都包含事件监听addEventListener()和 removeEventListener()这两个方法，并且它们都接受 3 个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。如果布尔值是 true，则在捕获阶段调用事件处理程序；如果是 false，表示在冒泡阶段调用事件处理程序。默认为冒泡阶段处理。
使用场景如：div和body同时添加click事件，当点击div时，不触发body的事件，只要在div执行语句之后使用e.stopPropagation()即可不触发body的事件。