JavaScript基础 事件 定义 及 捕获冒泡过程

首先来了解几个概念

事件对象     是与特定对象相关并且包含事件详细信息的对象

                  每个事件对象基本上都包括 事件类型type属性和事件对象target属性（具体绑定dom）

每一个dom都有唯一的id sourceIndex，ie浏览器可实现查看sourceIndex。

比如在ie浏览器的console里输入：

var doms = document.getElementsByTagName('*');
var str = '';
for (var i = 0, len = doms.length; i < len; i++) {     
str += doms[i].tagName + ': ' + doms[i].sourceIndex + '\n';
}

chrome浏览器则看不出sourceIndex属性：

这些id是根据dom的树形结构排出来的。

 

事件的传播

当我们绑定一个事件，并且这个事件发生的时候。该事件并不是直接到达绑定dom

举个例子：

当我们给span绑定了一个点击事件。

当我们真的点击了span事件。这个点击事件会分为2个过程：捕获和冒泡。

事件由最外层的window开始由父层向子层传递。每传一层的动作都叫做捕获，实际上就是对比该层是不是该事件的target（目标dom）如果不是则继续向子层传递。如果是则执行操作，并终止向子层的继续传递。进入下一阶段冒泡。将该事件向父层传递，直至最外层。

实际上就像是一个小人拿着一道指令走进一层层房间。指令是进入203房间的时候在门口做一个动作然后原路返回。小人在走进去找203房间的时候就是捕获过程。找到203房间在门口完成指定动作之后，就原路返回。原路返回的过程就是冒泡过程。

这就是我对这个名词的理解。如果有异议或疑问请在评论中提出。