本文摘自PHP中文网,作者little bottle,侵删。
冒泡机制
气泡从水底开始往上升,由深到浅,升到最上面。在上升的过程中,气泡会经过不同深度层次的水。相对应地:这个气泡就相当于我们这里的事件,而水则相当于我们的整个dom树;事件从dom 树的底层,层层往上传递,直至传递到dom的根节点。当子元素与父元素有相同的事件时,当子元素被触发时父元素也会被触发冒泡机制
在不同浏览器中,冒泡的程度不同:
IE 6.0:
p -> body -> html -> document
其他浏览器:
p -> body -> html -> document -> window
注意:
并不是所有的事件都能冒泡,以下事件不冒泡:blur、focus、load、unload
当子元素与父元素有相同的事件时,当子元素被触发时父元素也会被触发冒泡机制。冒泡事件,如下代码:
HTML
1 2 |
|
CSS
1 |
|
JS
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
效果图
在点击按钮和红色区域的时候,事件会一层层的向上传递,这个并不是我们想要的效果,那该如何阻止事件冒泡呢?
阻止冒泡的方法
标准浏览器 和 ie浏览器
w3c:event.stopPropagation() proPagation
IE:event.cancelBubble = true
兼容的写法
if(event && event.stopPropagation){ // w3c标准
event.stopPropagation();
}else{ // IE系列 IE 678
event.cancelBubble = true;
}
阻止冒泡后
JS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
|
需要在那个地方阻止冒泡事件,就在其中添加阻止冒泡的方法;
可以将阻止冒泡的方法封装为一个函数需要的时候直接调用即可。
【推荐课程:JavaScript视频教程】
以上就是JavaScript事件捕获与事件冒泡的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
更多相关阅读请进入《javascript》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者