事件流：捕获 目标 冒泡

这两天在开发相似“有赞“编辑商铺页面的功能。鼠标悬浮到某个组件，出现”添加“组件的按钮，点击该按钮在右侧区域出现可供选择的基础组件模块；而鼠标点击某个组件，右侧区域则出现对该组件的操做面板。由于操做区都在右侧，因此基础组件模块和对组件的操做面板不能重叠出现。即点击组件在右侧区域出现操做面板，要隐藏可能存在的基础组件模块。

dom结构以下：

.component // 组件 -- 点击它，右侧出现该组件的操做面板
 	.show
     	.top-add //在该组件的上方添加组件 -- 点击它，右侧出现基础组件选择模块
         .bottom-add // 在该组件的下方添加组件 -- 点击它，右侧出现基础组件选择模块
         .remove //删除该组件
复制代码

从dom结构能够看出，两个绑定事件的dom节点之间有包含关系，component是爷爷辈，add是孙子辈。所以，在点击更深层次节点（add）时候，它的点击事件和component点击事件存在于同一个事件流中。所以，因为事件流的存在，在点击add时若是不阻止事件冒泡，就会触发component的点击事件。两个点击事件的结果互斥，因此不管怎么add，右侧区域都没法出现基础组件模块。￣□￣｜｜

####敲黑板knock, knock, 事件流：捕获阶段-目标阶段-冒泡阶段

如何阻止点击add触发component的事件行为呢？就是要阻止事件冒泡咯。用event的方法: event.stopPropagation()便可。

事件委托/事件代理

“在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的总体运行性能。致使这一问题的缘由是多方面的。首先，每一个函数都是对象，都会占用内存；内存中的对象越多，性能就越差。其次，必须事先指定全部事件处理程序而致使的DOM访问次数，会延迟整个页面的交互就绪时间。”

“对“事件处理程序过多”问题的解决方案就是事件委托。事件委托利用了事件冒泡，只指定一个事件处理程序，就能够管理某一类型的全部事件。例如，click事件会一直冒泡到document层次。也就是说，咱们能够为整个页面指定一个onclick事件处理程序，而没必要给每一个可单击的元素分别添加事件处理程序。”

“对于事件代理来讲，在事件捕获或者事件冒泡阶段处理并无明显的优劣之分，可是因为事件冒泡的事件流模型被全部主流的浏览器兼容，从兼容性角度来讲仍是建议你们使用事件冒泡模型。”

“事件委托还有一个好处就是添加进来的元素也能绑定事件。”

ps. 关于事件（event）的target和currentTarget，target是真正发生事件的DOM元素，而currentTarget指的是绑定事件的元素。

很是详细的文章参考