JS事件机制----捕获和冒泡

在工作学习中，事件绑定机制用到了addEventListener()绑定方法，其具体用法如下：

element.addEventListener('event', function, useCapture)，其参数值介绍如下：

参数值

简单理解捕获和冒泡

捕获(capture)和冒泡(bubble)是事件传播过程中的两个概念, 比如用户单击某个元素, 但由于元素处于父元素内, 该父元素又处于document对象中, document对象又处于window对象中, 因此该单击事件实际发生在该元素, 父元素, document, window对象上, 而事件传播过程就是浏览器决定依次触发哪个对象的事件处理函数的过程.

DOM事件模型将事件传播过程分为两个阶段: 捕获阶段和冒泡阶段

在事件捕获阶段, 事件从最顶级的父元素逐层向内传递, 

在冒泡阶段, 事件从事件发生的直接元素 , 逐层向父元素传递

举例说明

点击孙子元素, 给body中的元素都添加点击事件并输出触发事件的对象id:

控制台输出

捕获和冒泡优先级

捕获 > 冒泡

用捕获还是冒泡

对于事件代理来说，在事件捕获或者事件冒泡阶段处理并没有明显的优劣之分，但是由于事件冒泡的事件流模型被所有主流的浏览器兼容，从兼容性角度来说还是建议大家使用事件冒泡模型。