这两天在开发类似“有赞“编辑商铺页面的功能。鼠标悬浮到某个组件，出现”添加“组件的按钮，点击该按钮在右侧区域出现可供选择的基础组件模块；而鼠标点击某个组件，右侧区域则出现对该组件的操作面板。因为操作区都在右侧，所以基础组件模块和对组件的操作面板不能重叠出现。即点击组件在右侧区域出现操作面板，要隐藏可能存在的基础组件模块。
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指的是绑定事件的元素。
网友评论