今天呢,来讲一个知识点,叫做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),当再次点击这一个就只会出现它这一个弹窗