最容易理解的 js事件冒泡原理

前些时间有位大佬问到“js冒泡原理”，平时也只是用冒泡处理各种特效和功能，这里给大家详细介绍下js冒泡原理

事件冒泡 字如其名 就是会逐层向上的触发，与之相对的是 事件捕获 

首先我们要知道什么是 DOM

DOM可以理解为是一个树形结构，在DOM模型中，HTML元素是有层次的。当一个HTML元素上产生一个事件时，该事件会在DOM树中元素节点与根节点之间按特定的顺序传播，路径所经过的节点都会收到该事件，这整个传播过程就是DOM事件流。

DOM事件流存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。

1，事件捕获：当鼠标点击或者触发DOM元素时，浏览器会从根节点由外而内的进行事件传播

2，事件冒泡：与事件捕获相反，事件冒泡是由内到外进行事件传播，直到根节点。

DOM标准事件流的触发的先后顺序为：先捕获再冒泡，即当触发dom事件时，会先进行事件捕获，捕获到事件源之后通过事件传播进行事件冒泡。

常用的冒泡事件的API :

1，addEventListener(event, function, useCapture)  设定一个事件监听器，当某一事件发生通过设定的参数执行操作

      参数 event 是必须的，表示监听的事件，例如 click, touchstart 等，就是之前不加前缀 on 的事件。
      参数 function 是必须的，表示事件触发后调用的函数，可以是外部定义函数，也可以是匿名函数。
      参数 useCapture 是选填的，填true或者false，用于描述事件是冒泡还是捕获，true表示捕获，默认的false表示冒泡。

2，removeEventListener(event, function, useCapture)  移除 addEventListener() 添加的事件监听

具体参数和  addEventListener(event, function, useCapture)  相同

3.stopPropagation() 阻止事件的冒泡  

该函数只阻止事件向祖辈元素的传播，不会阻止该元素自身绑定的其他事件处理函数的函数。

4.preventDefault()  取消事件的默认动作

 

事件委托：

e.target表示在事件冒泡中触发事件的源元素
event.target.nodeName 　　-- 获取事件触发元素标签name（li,p…）
event.target.id　　　　　　--  获取事件触发元素id
event.target.className　　-- 获取事件触发元素classname
event.target.innerHTML　　-- 获取事件触发元素的内容（li）