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),当再次点击这一个就只会出现它这一个弹窗

目录
相关文章
|
6月前
|
JavaScript 前端开发
js开发:请解释事件冒泡和事件捕获。
JavaScript中的事件处理有冒泡和捕获两种方式。事件冒泡是从子元素向上级元素传递,而事件捕获则从外层元素向内层传递。`addEventListener`的第三个参数可设定事件模式,`false`或不设为冒泡,`true`为捕获。示例代码展示了如何设置。
49 2
|
25天前
|
JavaScript 前端开发 UED
JS DOM 事件流与事件冒泡
【10月更文挑战第16天】理解 DOM 事件流和事件冒泡是掌握 JavaScript 事件处理的关键。通过合理利用事件冒泡,可以实现更高效、灵活的事件处理机制,提升用户体验和开发效率。在实际开发中,要根据具体情况灵活运用这些概念,以达到最佳的效果。
|
5月前
|
JavaScript 前端开发
事件委托是JS技巧,通过绑定事件到父元素利用事件冒泡,减少事件处理器数量,提高性能和节省内存。
【6月更文挑战第27天】事件委托是JS技巧,通过绑定事件到父元素利用事件冒泡,减少事件处理器数量,提高性能和节省内存。例如,动态列表可共享一个`click`事件处理器,通过`event.target`识别触发事件的子元素,简化管理和响应动态内容变化。
46 0
|
1月前
|
JavaScript 前端开发 UED
JavaScript中的事件冒泡
JavaScript中的事件冒泡
|
2月前
|
存储 JavaScript 前端开发
js事件冒泡和事件委托
事件冒泡是指事件从最内层元素开始逐级向上传播至祖先元素的过程,默认情况下,点击子元素时会先触发自身的事件处理程序,再依次向上触发父元素的处理程序。事件委托则是在父元素上设置事件处理程序,利用事件冒泡机制处理子元素的事件,以此减少内存消耗和提高性能,特别适用于处理大量动态子元素的情况。其区别在于事件冒泡是事件传播机制的一部分,而事件委托是编程技巧,通过在父元素上绑定事件处理程序来简化子元素的事件处理。
24 0
|
3月前
|
JavaScript 前端开发 UED
JavaScript中的事件冒泡
JavaScript中的事件冒泡
26 1
|
4月前
|
JavaScript
js 事件流、事件冒泡、事件捕获、阻止事件的传播
js 事件流、事件冒泡、事件捕获、阻止事件的传播
73 1
|
5月前
|
JavaScript
Vue.js中使用.self修饰符来处理事件冒泡
Vue.js中使用.self修饰符来处理事件冒泡
|
6月前
|
JavaScript 前端开发
JavaScript DOM 操作:解释一下事件冒泡(Event Bubbling)和事件捕获(Event Capturing)。
【4月更文挑战第14天】JavaScript中的事件处理包括冒泡和捕获两个阶段。事件冒泡是从根节点向目标元素逐级向上传播事件,允许在元素内部捕获外部事件。事件捕获则相反,从根节点向下到目标元素,使得外部能捕获内部事件。`addEventListener`方法用于添加事件监听器,通过`useCapture`参数切换冒泡或捕获阶段处理事件,默认为`false`(冒泡阶段)。兼容性考虑,推荐使用`addEventListener`。
51 0