JavaScript事件捕获与事件冒泡

冒泡机制

在不同浏览器中，冒泡的程度不同： IE 6.0: p -> body -> html -> document 其他浏览器: p -> body -> html -> document -> window

注意：

并不是所有的事件都能冒泡，以下事件不冒泡：blur、focus、load、unload

当子元素与父元素有相同的事件时，当子元素被触发时父元素也会被触发冒泡机制。冒泡事件，如下代码：

HTML

<p id="father">     <button id="btn">点击</button></p>

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("点击了文档");         }     }

效果图

阻止冒泡的方法

标准浏览器 和 ie浏览器 w3c：event.stopPropagation() proPagation IE：event.cancelBubble = true

兼容的写法 if(event && event.stopPropagation){ // w3c标准 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视频教程】

以上就是JavaScript事件捕获与事件冒泡的详细内容，更多内容请关注技术你好其它相关文章！