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或不懂得地方欢迎在评论区指出和提问喔！

Javascript的事件冒泡相关推荐

JavaScript(js)事件冒泡、事件捕获、事件委托详解
JavaScript(js)事件冒泡.事件捕获.事件委托详解 1.什么是事件 JavaScript和HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口发生的一些特定的交互瞬间.可以使用监听 ...
JavaScript：事件冒泡和事件委托
2019独角兽企业重金招聘Python工程师标准>>> JavaScript事件代理和委托(Delegation) JavaScript事件冒泡和事件委托 JavaScript:通过 ...
javascript的事件冒泡,阻止事件冒泡和事件委托，事件委托是事件冒泡的一个应用。...
2018年12月13日更新 <!DOCTYPE html> <html lang="en"> <head><meta charset=&q ...
javascript 停止事件冒泡以及阻止默认事件冒泡
停止事件冒泡 function stopBubble(e) {// 如果提供了事件对象,则这是一个非IE浏览器if ( e && e.stopPropagation ) {// 因此它 ...
javascript阻止事件冒泡和浏览器的默认行为
http://www.aspxhome.com/javascript/skills/200712/262128.htm 就是说用Div框住flash Div的鼠标事件不传递给Body 文中说的方法记 ...
Javascript 之事件冒泡(Event Bubbling)
翻译.原文出处:http://www.webreference.com/js/column10/eventbubbling.html 今天忽然感觉对IE的事件模型都点儿模糊,赶紧找了片文章,巩固一下. ...
javascript 阻止事件冒泡 cancelBubble
javascript简单的阻止事件冒泡,可以使用事件的cancelBubble方法为true: html部分 <button id="btn1">点击显示div< ...
JavaScript之事件冒泡和事件捕获详细介绍
怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别,有需要的朋友可以参考一下 (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: ...
html 冒泡事件拦截,JavaScript阻止事件冒泡与事件捕获
1.事件冒泡在一个对象上触发某类事件,如onclick事件等,在其祖先节点上也会依次触发该事件. 事件冒泡依次输出:a.div.body 注意:不是所有的事件都能冒泡.blur.focus.loa ...
JavaScript 事件冒泡简介及应用（转）
http://www.jb51.net/article/21801.htm 一.什么是事件冒泡在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会 ...

Javascript的事件冒泡

Javascript的事件冒泡相关推荐

最新文章

热门文章