作者:邱文馨4966 | 来源:互联网 | 2020-08-23 03:49
冒泡机制 气泡从水底开始往上升,由深到浅,升到最上面。在上升的过程中,气泡会经过不同深度层次的水。相对应地:这个气泡就相当于我们这里的事件,而水则相当于我们的整个dom树;事件从dom 树的底层,层层往上传递,直至传递到dom的根节点。当子元素与父元素有相同的事件时,当子元素被触发时父元素也会被触发冒泡机制
注意: 并不是所有的事件都能冒泡,以下事件不冒泡:blur、focus、load、unload
当子元素与父元素有相同的事件时,当子元素被触发时父元素也会被触发冒泡机制。冒泡事件,如下代码:
HTML
点击
CSS father{ width: 300px; height: 300px; background-color: red; margin: auto; } JS window.Onload= function () {
var father = document.getElementById("father");
var btn = document.getElementById("btn");
btn.Onclick= function () {
alert("点击了按钮");
};
father.Onclick= function () {
alert("点击了父标签");
};
document.Onclick= function () {
alert("点击了文档");
}
} 效果图
event.stopPropagation(); }else{ // IE系列 IE 678
event.cancelBubble = true; }
阻止冒泡后 JS window.Onload= function () {
var father = document.getElementById("father"); var btn = document.getElementById("btn");
btn.Onclick= function () {
if(event && event.stopPropagation){ // w3c标准 阻止冒泡机制
event.stopPropagation();
}else{ // IE系列 IE 678
event.cancelBubble = true;
}
alert("点击了按钮");
};
father.Onclick= function () {
if(event && event.stopPropagation){ // w3c标准 阻止冒泡机制
event.stopPropagation();
}else{ // IE系列 IE 678
event.cancelBubble = true;
}
alert("点击了父标签");
};
document.Onclick= function () {
alert("点击了文档");
}
}
以上就是Javascript事件捕获与事件冒泡的详细内容,更多请关注 第一PHP社区 其它相关文章!