html5网站开发书籍,福州市工程造价信息网,wordpress主题汉化语言包,网站建设相关的工作事件的三个阶段#xff1a;捕获阶段 目标阶段 冒泡阶段 编辑 删除 js有好多的知识需要不断积累#xff0c;但是不能浅尝#xff0c;应该深究其内因#xff0c;并运用在日常开发过程中。 捕获阶段#xff1a; 事件从根节点流向目标节点#xff0c;途中流经各个DOM节点捕获阶段 目标阶段 冒泡阶段 编辑 删除 js有好多的知识需要不断积累但是不能浅尝应该深究其内因并运用在日常开发过程中。 捕获阶段 事件从根节点流向目标节点途中流经各个DOM节点在各个节点上触发捕获事件直到达到目标节点。 那么捕获阶段有什么用吗完全可以没有捕获阶段也可以啊 捕获阶段的主要任务是建立传播路经在冒泡阶段根据这个路经回溯到文档根节点 目标阶段 事件到达目标节点时就到了目标阶段事件在目标节点上被触发冒泡阶段 事件在目标节点上触发后不会终止一层层向上冒回溯到根节点。运用举例html代码 div classali classba href# classcbuhuo/a/li/divjs代码var div document.getElementsByClassName(a)[0]; //注意[0]
var li document.getElementsByClassName(b)[0];
var a document.getElementsByClassName(c)[0];//第三个参数默认是false,
//是对事件冒泡过程添加函数进行处理
div.addEventListener(click,function(event){console.log(div);
});
li.addEventListener(click,function(event){console.log(li);
});
a.addEventListener(click,function(event){console.log(a);
});//事件捕获过程处理
//第三个参数设为true
div.addEventListener(click,function(event){console.log(div);
},true);
li.addEventListener(click,function(event){console.log(li);
},true);
a.addEventListener(click,function(event){console.log(a);
},true);运行结果 div li a a li div可知首先是捕获阶段执行再是冒泡阶段运用在事件委托上 JavaScript事件代理可以把事件处理器添加到一个父元素上这样就避免了把事件处理器添加到多个子元素上。阻止事件冒泡 某个DOM节点绑定了某事件监听器本来是想当该DOM节点触发事件才会执行回调函数。结果是该节点的某后代节点触发某事件由于事件冒泡该DOM节点事件也会触发执行了回调函数这样就违背了最初的本意了。 html!-- 阻止事件冒泡 --li classaaa href# classbb阻止事件冒泡/aa href# classcccc/a/lijsvar li1 document.getElementsByClassName(aa)[0];
li1.addEventListener(click,function(event){if(event.target.tagName.toLowerCase() li){console.log(event.target);}console.log(event.currentTarget); //监听节点
})
for(var i0;ili1.children.length;i){li1.children[i].addEventListener(click,function(event){event.stopPropagation(); //在子元素上阻止冒泡})
}结果 点击a标签时没有任何反应当点击li标签时会输出对象注意 无法在捕获阶段阻止事件冒泡 所以当上述代码加上true后达不到效果
