js的事件冒泡

简介: js的事件冒泡

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

目录
相关文章
|
4天前
|
JavaScript 前端开发
js开发:请解释事件冒泡和事件捕获。
JavaScript中的事件处理有冒泡和捕获两种方式。事件冒泡是从子元素向上级元素传递,而事件捕获则从外层元素向内层传递。`addEventListener`的第三个参数可设定事件模式,`false`或不设为冒泡,`true`为捕获。示例代码展示了如何设置。
24 2
|
4天前
|
JavaScript 前端开发
js开发:请解释事件冒泡和事件捕获。
JavaScript中的事件处理有冒泡和捕获两种方式。事件冒泡是从子元素向上级元素依次触发事件,而事件捕获则从最外层元素向内层元素传递。`addEventListener`的第三个参数可设定事件模式,`false`或不设为冒泡,`true`为捕获。例如: ```javascript element.addEventListener('click', console.log, false); // 冒泡 element.addEventListener('click', console.log, true); // 捕获 ```
20 0
|
4天前
|
JavaScript
js中的事件冒泡
js中的事件冒泡
21 0
|
4天前
|
JavaScript
js中的事件冒泡和事件捕捉
js中的事件冒泡和事件捕捉
14 0
|
4天前
|
JavaScript 前端开发
【面试题】对JS中的事件冒泡、事件捕获、事件委托的理解
【面试题】对JS中的事件冒泡、事件捕获、事件委托的理解
|
4天前
|
JavaScript 前端开发
JavaScript DOM 操作:解释一下事件冒泡(Event Bubbling)和事件捕获(Event Capturing)。
JavaScript DOM 操作:解释一下事件冒泡(Event Bubbling)和事件捕获(Event Capturing)。
32 2
|
7月前
|
JavaScript 前端开发
JavaScript学习 -- 事件冒泡与事件委派(委托)
JavaScript学习 -- 事件冒泡与事件委派(委托)
31 0
|
7月前
|
JavaScript 容器
js中的事件冒泡与事件捕获
js中的事件冒泡与事件捕获
17 0
|
9月前
|
JavaScript 前端开发
JS的冒泡和如何阻止事件冒泡
JS的冒泡和如何阻止事件冒泡
127 0