目录

事件冒泡

事件捕获

事件冒泡与事件捕获的区别

默认事件

 js中的事件传递方式有两种： 冒泡 和 捕获。

js中事件会以冒泡的形式由内到外的向上传递。由最内层点击元素向外扩散到最外层元素，激活外层元素注册的相应事件，这就是事件冒泡。

事件冒泡是js语言中事件的传递过程，传递方式，我们会需要用到它来做一下事情，但有时它的存在也会影响我们的操作。

使用：事件代理(事件委托)

什么是事件代理：利用事件冒泡的特性，将本应该注册在子元素上的处理事件注册在父元素上，使用父元素来代理多个子元素的事件。

这样做可以减少DOM操作，减少事件的注册步骤，提升性能。

禁用：阻止事件冒泡

为什么要阻止事件冒泡：在一些场景中，比如当外层元素包裹内层按钮，点击内层按钮事件会以冒泡的形式传递到外层元素上，同时激活外层元素的相应事件，而这并不是我们想要的，我们只是想激活内层按钮的事件，这种场景就需要阻止事件冒泡。

怎么阻止事件冒泡：使用HTML  DOM 的 event对象，e.stopPropagation()

什么是event对象：Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件捕获与事件冒泡刚好相反，事件会从最外层开始发生，依次触发，直到最具体的元素，这就是事件捕获。

事件捕获其实跟事件冒泡差不多，事件捕获是总最外层开始向内层传递。即最外层元素上的事件先被触发。

阻止事件捕获：e.stopImmediatePropagation();

对于同样是多层嵌套的HTML结构，点击最内层的按钮，那么，到底是执行事件冒泡还是事件捕获呢，默认是事件冒泡。

事件冒泡跟事件捕获统称为事件流，而一般情况下我们只在冒泡阶段处理事件，而是否在捕获阶段处理事件可以通过 addEventListener 方法来配置，addEventListener有三个参数，第一个是事件类型，第二个是回调处理函数，第三个就是是否在捕获阶段处理，默认 false ，即在冒泡处理，所以一般情况下事件只会 向上 冒泡。

所以 stopPropagation 方法即可以阻止事件冒泡，也可以阻止事件捕获，而 stopPropagation 方法与 stopImmediatePropagation 方法的区别在于：

如果多个事件监听器被附加到相同元素的相同事件类型上，当此事件触发时，它们会按其被添加的顺序被调用。如果在其中一个事件监听器中执行 stopImmediatePropagation() ，那么剩下的事件监听器都不会被调用。即 stopImmediatePropagation 方法既能阻止事件冒泡也可以阻止当前元素绑定的其他相同类型的事件被触发。

 例：

paragraph

 默认事件，即是元素默认会触发的事件，如：a标签的跳转，button(type=submit)按钮的提交行为，input输入框默认的点击获取焦点等，

有的时候你可能不想要触发执行默认事件，那么需要阻止元素的默认事件：e.preventDefault()