Javascript的事件冒泡

今天呢，来讲一个知识点，叫做Javascript的事件冒泡（Bubble），什么叫事件冒泡，就是指某件事件的向上传导，当后代元素被触发，其祖先元素也会被同样触发，这就是事件冒泡，光说不行，还得先演示一下。

首先，我们先创建一个“HTML”文档，在头部部分写上一个内联样式“style”，给“body”一个背景颜色，在“body”部分写上两个“div”给他们写上一个“ID”名（取名随意）

 

再创建两个不同大小的方块也给他们一个背景颜色（这里大小 颜色随意），就像这样：

 

 

然后就开始“JS”部分，写一个“script”的内联样式（因为代码较少，所以选择内联）后准备我们的事件冒泡，首先，获取“body”和两个“div”，分别给他们三个一个“点击事件”，（注意，“body”是可以直接获取也可以给他加个“ID”），再写上“alert”标签（alert 表弹窗）就像这样：

 

当我们点击“绿色部分”也就是box所在的div标签，就会弹出提示框，然而它并没有停下来，而是继续弹出下一个提示框wrap所在的div标签，直到body部分的提示框出现才彻底停下来。

 

而这也就是Javascript的事件冒泡，在大部分的开发过程中事件冒泡还是很有用，如果不想冒泡出现的话，也可以用一句话来取消，我们先在box所在的div的点击事件中的function函数括号里写上一个参数“event”，后在此点击事件中写上“event.cancelBubble = true”，这句话的意思也就是这个点击事件中的冒泡会被取消（其中浏览器中的默认值为false），当再次点击这一个就只会出现它这一个弹窗。

 

最后就是兼容性的问题，这种写法在IE8及以下的浏览器都是不能使用的，如果要在这上面使用就得加上这句代码“event = event ||window.event”。

 

这是我所做的Javascript的事件冒泡制作步骤，所以我要分享给你们，希望可以帮助到你们。

以上就是我的分享，新手上道，请多多指教。如果有新的bug或不懂得地方欢迎在评论区指出和提问喔！