理解js的事件冒泡

作为前端与后台之间的衔接工作者（搬砖工），常常是 在工作中，拿到前端同事编写好的静态交互页，还需要对Dom做自己的交互业务，交互免不了写事件，而事件处理最好的方法就是利用delegate监听赋值，为什么呢，这要追根到事件的冒泡原理。下面就先从遇到的两个关于事件的问题说起：

1.上面是一个下拉菜单组件，组件在给li渲染的时候，就给li绑定了点击事件（点击菜单中的某省名显示对应的省名），然而动态加载的时候，dom节点删了又增，新增的节点是不会有这个事件触发的。

2.还是这个下拉菜单，我更改了组件：用delegate定义外层监听li，给li赋点击事件，这时候可以补救第一个问题：渲染之后，dom节点增加与否，li出现就会有点击事件。

可又遇到了另一个问题：我要在省级li点击的时候给市级li添加数据源，但是发现新加的事件会先执行，组件定义的点击事件后面才进行。找了下原因，原来是我后来添加li监控的父级节点低于组件定义的父级节点，这个就是事件冒泡顺序的关系。

至于什么是事件冒泡，我觉得自己理解的才是最简单易懂的，那就是：

当一个节点的事件被 触发时（鼠标点击的位置所在的元素），会先执它最里层节点的的同类事件，一层层向上检索执行；

也就是监听它的父级节点（被委托的父级节点）的事件也是由最里层的节点执行的。

检验代码如下：