什么是时间冒泡?

时间冒泡是指当一个元素触发一个事件时,事件会像水泡一样,从触发元素向它的所有父节点传播,一直到根节点都会接收到此事件

1。如果父元素中注册了相应的事件处理函数,那么尽管事件在子节点触发的,在父元素上注册的事件处理函数同样会被触发1。

时间冒泡示例代码如下:

html 复制代码
<!DOCTYPE html>
<html>
<body>

<p id="demo">点击我,父元素会显示点击事件!</p>

<button id="myBtn">点击我</button>

<script>
document.getElementById("myBtn").addEventListener("click", function(event) {
  var eventType = event.type; //获取事件类型
  var target = event.target; //获取事件目标
  var parent = target.parentNode; //获取父元素
  while(parent !== null) { //循环遍历父元素
    if(parent.tagName === "P") { //如果父元素是p标签
      parent.textContent += "\n" + eventType + " 事件在 " + target.tagName + " 上被触发"; 
    }
    parent = parent.parentNode; //继续向上遍历
  }
});
</script>

</body>
</html>
相关推荐
lightgis4 分钟前
chrome中的axure插件提示无法不受支持
前端·chrome
速易达网络15 分钟前
Vue3 原生移动应用开发来了
前端·javascript·css
渣哥18 分钟前
别再乱用了!Spring AOP 与 AspectJ 的区别比你想的复杂
javascript·后端·面试
GISer_Jing18 分钟前
LLM对话框项目技术栈&重难点总结
前端·ai·node.js
患得患失94924 分钟前
【Turborepo】【Next】 Turborepo + Next.js 前后端精简搭建笔记(带官网)
开发语言·javascript·笔记
我爱学习_zwj39 分钟前
【鸿蒙进阶-7】鸿蒙与web混合开发
前端·华为·harmonyos
小谭鸡米花40 分钟前
高德地图电子围栏/地图选区/地图打点
前端·javascript·vue.js
摆烂工程师44 分钟前
什么是 ChatGPT Business 会员?与 ChatGPT Plus 有什么不同?
前端·后端·程序员
闲不住的李先森1 小时前
使用Context7:告别AI“幻觉”,让编程助手永远生成最新、可用的代码
前端·ai编程·cursor
西瓜树枝1 小时前
解决 JS 大整数精度丢失?一文读懂 BigInt 的底层逻辑与实战规则
前端·javascript