您的位置:首页 > Web前端 > JavaScript

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

2018-02-24 14:10 537 查看
首先来了解几个概念
事件对象     是与特定对象相关并且包含事件详细信息的对象
                  每个事件对象基本上都包括 事件类型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房间在门口完成指定动作之后,就原路返回。原路返回的过程就是冒泡过程。
这就是我对这个名词的理解。如果有异议或疑问请在评论中提出。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: