js 事件冒泡、事件捕获、事件委托

事件处理模型——事件冒泡、捕获

事件冒泡：

结构上（非视觉上）嵌套关系的元素，会存在冒泡的功能，即同一事件，自子元素冒泡向父元素。（自底向上）

事件捕获：

结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子元素（事件源元素）。（自顶向下）（ie没有捕获事件）

触发顺序：先捕获，后冒泡

但感觉事件捕获用的少一点 利用addeventlistener函数来测试控制第三个参数为true(事件捕获)或false(事件冒泡)

以下事件不存在冒泡事件focus，blur，change，submit，reset，select等

具体的操作如

16_事件冒泡和捕获的执行顺序了解吗？什么是事件委托 - 简书 

这个用户名为“沐向”博主感觉写的很简单明了 ,我感觉我写的可能没他易懂,所以请看看他的博客，可以仔细观摩一下！！！

事件委托：

事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件(红宝石书定义)    （不是很好理解）

取一个全网通用的例子借花献佛了！！！

有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台MM也会在收到寄给新员工的快递后核实并代为签收。

这里其实还有2层意思的：

第一，现在委托前台的同事是可以代为签收的，即程序中的现有的dom节点是有事件的；

第二，新员工也是可以被前台MM代为签收的，即程序中新添加的dom节点也是有事件的。

事件委托的原理：

      事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？就是事件从最深的节点开始，然后逐步向上传播事件，举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。

事件委托的使用场景：

    一般来讲dom需要事件处理机制，当我们需要dom操作的时候就给他一个操作就好了，但是如果遇到这种情况的话：一个ul 里边100个li 每点击一个li触发一个事件，但是事件都是同一事件的话，我们则需要100次dom操作！！！！100啊，想想dom操作本来就是个浪费性能的操作，那这时候我们就需要事件委托了，将事件绑在父亲ul的身上，无论点击那个li都会触发我们想要的这个事件。