1. 捕获阶段:
事件从根节点流向目标节点,途中流经各个DOM节点,在各个节点上触发捕获事件,直到达到目标节点。
1.1 那么捕获阶段的作用是什么呢?
捕获阶段的主要任务是建立传播路经,在冒泡阶段根据这个路经回溯到文档根节点
2. 目标阶段
事件到达目标节点时,就到了目标阶段,事件在目标节点上被触发
3. 冒泡阶段
事件在目标节点上触发后,不会终止,一层层向上冒,回溯到根节点。
3.1 阻止事件的冒泡
当我们在某个DOM节点绑定了某事件监听器,本来是想当该DOM节点触发事件,再执行回调函数。结果是该节点的某个子节点触发事件,由于事件冒泡,该DOM节点事件也会触发,执行了回调函数,这样就违背了最初的本意了。
所以需要阻止冒泡: event.stopPropagation()
//阻止冒泡封装
function stopBub(event) {
event = event || window.event;
if(event&&event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
}
在整理以前的笔记时,发现关于事件的阶段是一句带过,所以重新整理希望以后自己忘记的时候可以看明白。
个人能力有限,如果有错希望指正。